Different color stroke on same line graph

[jbuoncri1]

Hello. I was wondering if we are able to change the color of a line graph when a point hits a certain index. For example, if I have a line graph plotted with points from 0-50 and I have two colors I want to use: blue and red. Would I be able to make indices 0-30 === blue and indices 31-50 === red?

Thanks for the help

[ckifer]

Maybe this demo can help you out? https://codesandbox.io/s/recharts-basic-line-chart-with-different-colors-dynamic-gradients-forked-fkzp3x

Overall you need to use a linear gradient, I'm admittedly not very good with gradients else I would try to help a bit more 😅

Check out this thread as well #407

[ckifer]

Even more in line with what you want https://codesandbox.io/s/recharts-basic-line-chart-with-different-colors-dynamic-gradients-forked-myzfsr?file=/index.js

Change BLUE_STOP_IDX to change the index where blue stops and red starts. You can probably do with multiple colors as well, you'd just need to figure out the linear gradients

[jbuoncri1]

This is what I was looking for! Thank you :)