JS charts in React JS - Issue with Data showing twice when modifying color

Question

I have a react application using JS charts, the data is pulled from a REST/JSON API. My chart shows two line graphs: Line 1) Original and Line 2) Modified. I want both the original and modified to show their own respective color.

My Original Code without color -results: the line graph shows both the original and modified in grey-:

const data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
      datasets: this.state.chartData.map((data, index) => { 
        return { 
          data,
          label: index === 0 ? 'Original' : 'Modified'
        } 
      })
    }

My attempt to add/change color -results: Modified shows twice & original does not show-:

const data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
      datasets: this.state.chartData.map((data, index) => { 
        return { 
          data,
          label: 'Original',
          backgroundColor:[ 
            'rgba(0,255,255,1)',
          ],
          label: 'Modified',
          backgroundColor:[ 
            'rgba(0,0,255,1)',
          ],
        } 
      })
    }

Am assuming there must be something wrong with my syntax / setup, could I get some help please?

Answer 1

In your first example you're using a conditional to display the label:

label: index === 0 ? 'Original' : 'Modified'

So I'm assuming you have to do the same with the backgroundColor:

backgroundColor: index === 0 ? ['rgba(0,255,255,1)'] : ['rgba(0,0,255,1)']

Putting it all together you'd have:

return { 
      data,
      label: index === 0 ? 'Original' : 'Modified',
      backgroundColor: index === 0 ? ['rgba(0,255,255,1)'] : ['rgba(0,0,255,1)']
}

Let me know if that works