how to change the stroke color of y axis to by linear gradient

user_14520694 0
Viewed 2256

I'm trying to change my y-axis stroke color to be linear-gradient in recharts. I know, I can define in defs element and inside define linerGradient element. but when I set my stroke to be stroke: "url(#linear)", the y-axis stroke disappear. this worked for me in a line chart but didn't work in the y-axis

           

            <defs>
                    <linearGradient
                        id="linear"
                        x1="84"
                        y1="5"
                        x2="84.1"
                        y2="470"
                    >
                        <stop offset="0%" stopColor="#05a" />
                        <stop offset="100%" stopColor="#0a5" />
                    </linearGradient>
                </defs>
                <YAxis
                    tickMargin={8}
                    tickLine={false}
                    label={{
                        value: props.yAxisLabel,
                        position: "insideBottomLeft",
                        angle: -90,
                        offset: 0,
                        fill: "#A5A5A5",
                    }}
                    tick={{ fill: "#A5A5A5" }}
                    ticks={[60, 120]} //TODO: change to function
                    strokeWidth={10}
                    // stroke="#FF3C06"
                    stroke="url(#linear)"
                    style={{
                        strokeLinecap: "round",
                    }}
                />

any help?

recharts reactjs javascript
2 Answers

I've just solved it by adding a fill="url(#linear)" instead stroke="url(#linear)"

user_148374320

If you are using linearGradient for YAxis you need to add one more prop to your linearGradient which is gradientUnits

 <linearGradient gradientUnits="userSpaceOnUse"/>

So this will make axisLine visible, and in YAxis component you can give something like this below.Because axisLine prop only takes bool or object, you can override stroke to make that point to your gradient id.

  <YAxis
    axisLine={{ stroke: "url(#<YOUR_GRADIENT_ID_NAME>)" }}
  />
user_83872380
Related