Multiple line series in one chart and declaring different color

[nisa99]

Hi, how do you create multiple line chart and declaring specific color on each of its line

[vagyvin]

I'm trying to achieve the same. @nisa99 Were you able to figure it out?

[AurelReb]

Hi, you can achieve this with the options param in the lineSeries objects. Please check the README

const lineSeries = [{
  data: ...,
  options: {color: '#f48fb1'}
}]

This way, you can add a different color for each line of the chart :)

[silvercondor]

@vagyvin or anyone looking for the solution, you declare 2 Series objects of type lineSeries

render(){
   let lineSeries = [{
      //lineSeries object 1
      data: [
        { time: '2018-12-01', value: 32.51 },
        { time: '2018-12-01', value: 62.51 },
        { time: '2018-12-02', value: 31.11 },
        { time: '2018-12-02', value: 21.11 },
        { time: '2018-12-03', value: 27.02 },
        { time: '2018-12-04', value: 27.32 },
        { time: '2018-12-05', value: 25.17 },
        { time: '2018-12-06', value: 28.89 },
        { time: '2018-12-07', value: 25.46 },
        { time: '2018-12-08', value: 23.92 },
        { time: '2018-12-09', value: 22.68 },
        { time: '2018-12-10', value: 22.67 },
        { time: '2018-12-11', value: 27.57 },
        { time: '2018-12-12', value: 24.11 },
        { time: '2018-12-13', value: 30.74 },
      ],
      options: { color: '#77DD77' }
    }, {
      //lineSeries object 2
      data: [
        { time: '2018-12-01', value: 62.51 },
        { time: '2018-12-01', value: 22.51 },
        { time: '2018-12-02', value: 51.11 },
        { time: '2018-12-02', value: 71.11 },
        { time: '2018-12-03', value: 87.02 },
        { time: '2018-12-04', value: 237.32 },
        { time: '2018-12-05', value: 22.17 },
        { time: '2018-12-06', value: 22.89 },
        { time: '2018-12-07', value: 28.46 },
        { time: '2018-12-08', value: 29.92 },
        { time: '2018-12-09', value: 22.68 },
        { time: '2018-12-10', value: 222.67 },
        { time: '2018-12-11', value: 27.57 },
        { time: '2018-12-12', value: 28.11 },
        { time: '2018-12-13', value: 30.74 },

      ],
      options: { color: "#FE6B64" }
    }]
return(
<div>
<Chart id='demo-chart' lineSeries={lineSeries} autoWidth height={500} darkTheme />
</div>
}}