can I set different colours for one line in Line chart?

[tuwshuu0227]

can I set different colours for one line in Line chart? or can I cut line in Line chart?
Like this...

[Abhinandan-Kushwaha]

Hi @tuwshuu0227 👋

Multiple lines can handled using 2 separate data arrays. For this you can use the data and data2 props. Since we have 2 separate lines, they are allowed to have 2 different colors.

However, the above chart may not be accomplished currently, even with 2 separate data arrays. I will work on this particular case soon.

The support for negative values in Line and Area charts is now added in version 1.0.6🎉
Also, 2 more props have been added- minValue and noOfSectionsBelowXAxis.
To know more, visit this comment

Hope it helps.🤗

[Abhinandan-Kushwaha]

Hi @tuwshuu0227 👋
The support for Line chart with different colors for 1 Line is now enabled in version 1.0.8🎉

The props used to achieve this are -

1. data
2. data2
3. startIndex
4. endIndex
5. startIndex2
6. endIndex2

Let's say you want to render a chart like this -

The code for the above chart will be-

const data = [
    {value:1.0, label:'1'},
    {value:0.75, label:'2'},
    {value:0.25, label:'3'},
    {value:0.00, label:'4'},
    {value:0.50, label:'5'},
    {value:0.72, label:'6'},
    {value:0.85, label:'7'},
  ];

return(
  <LineChart
        data={data}
        startIndex={0}
        endIndex={2}
        color1='red'
        data2={data}
        startIndex2={4}
        endIndex2={6}
        color2='blue'
        showFractionalValues
        maxValue={1.5}
        noOfSections={3}
        spacing={40}
        thickness={3}
        />
  )

Hope it helps🤗

[tuwshuu0227]

@Abhinandan-Kushwaha Hello there, thank you for your reply
My goal is cut line 3 or more times in one line But right now limit prop is only data3.
Maybe if its possible If I do set data like this..
const data = [
{value:1.0, label:'1'},
{value:0.75, label:'2'},
{value:0.25, label:'3'},
{value: null, label:'4'},
{value:0.50, label:'5'},
{value:0.72, label:'6'},
{value:0.85, label:'7'},
];
then it automatically cut line in null values.
Thank you for your time.

[Abhinandan-Kushwaha]

Hey @tuwshuu0227

Actually it's quite hard to implement this feature with the help of null values.
Better stick with the approach using startIndex and endIndex.

And worry not! we can now have upto 5 data sets simultaneously. 🎉
Just update to version 1.0.9

[tuwshuu0227]

Hello @Abhinandan-Kushwaha
Okay I understand its hard to do it. Thank you for update.

[Abhinandan-Kushwaha]

Hi @tuwshuu0227
Now we can cut the line into any number of segments using the lineSegments prop. This feature is available from version 1.3.18 onwards.🎉

See #432 (comment)

Here's an example-

const MultiSegmented = () => {
  const data = [
    {value: 5},
    {value: 8},
    {value: 7}, // break in line from previous to this point
    {value: 4},
    {value: 6},
    {value: 0, hideDataPoint: true}, // invisible, here's a break in the line
    {value: 0, hideDataPoint: true}, // break continued
    {value: 6},
    {value: 9},
  ];
  return (
    <LineChart
      spacing={35}
      data={data}
      lineSegments={[
        {startIndex: 0, endIndex: 1, color: 'green'},             // 1st segmant from 0th to 1st index
        {startIndex: 1, endIndex: 2, color: 'transparent'},       // break (transparent = invisible)
        {startIndex: 2, endIndex: 4, color: 'red'},               // 2nd segment from 2nd to 4th index
        {startIndex: 4, endIndex: 7, color: 'transparent'},       // 2nd break from 4th to 7th index
        // remaining of the data points, from 7th to 8th index make the last segment
      ]}
    />
  );
};

The output of the above code is-

[giltheodor]

Hi @Abhinandan-Kushwaha,

Its seems if I use the curved props the lineSegments is not working.

Thank you in advance

[Abhinandan-Kushwaha]

Hi @giltheodor
It's working for me. Can you please share your code?