How to use Y-Axis values for Recharts linear gradient

Hi, I've been trying to use the y-axis values to create a linear gradient, but it only seems to work with percentages, which don't seem to perfectly line up with the reference line. Here's my code;
const targetPercent =
highestValue.percentage - (100 - this.props.subjectData.targetGrade * 10);
// highestValue.percentage is the percentage value of the highest data point and subjectData.targetGrade returns a value from 1-8 (Irish grading system). 1 = 90%, 4 = 60%, etc.
...

<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#FFF" stopOpacity={0.2} />
<stop
offset={`${targetPercent}%`}
stopColor="#399be3"
stopOpacity={0.2}
/>
<stop
offset={`${targetPercent}%`}
stopColor="red"
stopOpacity={0.15}
/>
<stop
offset={`${targetPercent + 40}%`}
stopColor="#FFF"
stopOpacity={0.2}
/>
</linearGradient>
const targetPercent =
highestValue.percentage - (100 - this.props.subjectData.targetGrade * 10);
// highestValue.percentage is the percentage value of the highest data point and subjectData.targetGrade returns a value from 1-8 (Irish grading system). 1 = 90%, 4 = 60%, etc.
...

<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stopColor="#FFF" stopOpacity={0.2} />
<stop
offset={`${targetPercent}%`}
stopColor="#399be3"
stopOpacity={0.2}
/>
<stop
offset={`${targetPercent}%`}
stopColor="red"
stopOpacity={0.15}
/>
<stop
offset={`${targetPercent + 40}%`}
stopColor="#FFF"
stopOpacity={0.2}
/>
</linearGradient>
Left image is expected and right is actual.
No description
No description
0 Replies
No replies yetBe the first to reply to this messageJoin
Want results from more Discord servers?
Add your server