Multicolor line chart

[aljazkosirnik]

Hey, I am wondering if it's possible to create a multicolor line chart? Something like this:

I saw you are limited with your time, I can try to create the PR myself if you can guide me to the right component and quickly describe how you would implement this :)

[darkholiday]

I would like to implement the same behavior on my chart aswell Let me know if you have news.

I can help on the PR

[Abhinandan-Kushwaha]

Hi @darkholiday @aljazkosirnik 👋 Thanks for requesting this feature. It is now available in version 1.3.14🎉

It can be achieved using the some or all of the following props-

lineGradient?: boolean;
lineGradientComponent?: () => any;
lineGradientId?: string;
lineGradientDirection?: string;
lineGradientStartColor?: string;
lineGradientEndColor?: string;

Minimal example to show multicolor line chart-

<LineChart
    data={lineData}
    spacing={10}
    hideDataPoints
    lineGradient
/>

The output is-

Notice that the line gets a gradient of lightgreen and orange color by default. These can be customised using the lineGradientStartColor and lineGradientEndColor props respectively.

We can use our own gradient component via the lineGradientComponent prop. Note that lineGradient prop is mandatory when using custom gradient component.

Here's an example of custom lineGradientComponent-

LineChart
  data={lineData}
  spacing={10}
  hideDataPoints
  lineGradient
  lineGradientId="ggrd"
  lineGradientComponent={() => {
    return (
      <LinearGradient id="ggrd" x1="0" y1="0" x2={'0'} y2={'1'}>
        <Stop offset="0" stopColor={'blue'} />
        <Stop offset="0.5" stopColor={'orange'} />
        <Stop offset="1" stopColor={'green'} />
      </LinearGradient>
    );
  }}
/>

The output is-