Exploring Recharts: Line Chart with different colored segments for a single Line
Like any other charting library, Recharts allows you to work with line series data. A line chart has a lot of varied use cases. A very basic example is using a line series chart to show progress of something over time, like, how sales of smartphones has increased over the years. It is very easy to create a simple line chart out of the box in Recharts.
A simple static line chart is usually never enough for our data visualization needs. You would probably need to show some extra information like reference lines on the chart to mark important events, reference areas to mark important periods, adding extra information to the chart with Tooltips, etc. One such usage is to show the line chart in different colors before and after an important event. For example, we might want to show a different color for the smartphone data before iPhone was launched, and a different color after iPhone was launched.
One naive approach to this in any charting library would be to have 2 different line series, one which renders the data before the reference event and another which renders the data after the event,
OR
one line which displays the full data, and another line which only displays data before the event and renders on top of the other line with a different color.
Both of these approaches have some drawbacks:
- If you are drawing two different lines which have different starting points, both of them would be animated separately in Recharts, and the effect would not seem like a single line chart with different colors.
- If you draw two different lines with different end points, then based on the type of interpolation, your charts might not overlap appropriately towards the end of the shorter line.
Both of the above cases can be fixed by either choosing the appropriate interpolation type, or may be overriding animations, but this seems like an overkill to achieve what we want.
There might be an easier and less hack-y way to do this. Since these lines are svg elements and they accept a stroke, what if we could somehow change the color of stroke based on the data? What if we could use a syntax like this:
<Line dataKey="value" stroke={
d => d > 50 ? "red" : "green"
} />Sadly, this is not yet allowed by Recharts.
Currently Recharts allows to only provide stroke for the whole line. This means we can change the color of the whole line based on some data, but we cannot do that for different parts of the line chart.
But, we have a workaround. Since these line charts are svg elements, we can pass in a LinearGradient as the stroke.
This opens up a whole new set of possibilities, you can, for instance change the stroke for different parts of the chart on user interaction.
This capability to provide a stroke based on gradient is not specific to Recharts, but is applicable across all svg based charting libraries which allow you to pass in a stroke same as you pass stroke to any other svg element.
References:
A list of all other posts in this series:
- Exploring Recharts: Reference Area
- Exploring Recharts: multiple ReferenceLine segments
- Exploring Recharts: using foreignObject to render custom HTML
- Exploring Recharts: What can be rendered inside a Recharts contianer ?
- Exploring Recharts: different ways of accessing data
- Exploring Recharts: Pulsating circle using ReferenceDot
- Exploring Recharts: LineChart with different colored segments for a single Line