TTC
Theo's Typesafe Cult•15mo ago
General Mudkipp

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

Did you find this page helpful?