Chartjs-React-chartjs-2 color background columns alternately

by

0👍

for this the best way would be to make your data in to a separate array

const data = [{x: "2007-01-03",y: 0.0},{x: "2007-02-18",y: -1.3},{x: "2007-08-21",y: -0.2}]

then use an array.prototype.map function with the data and component then you have

<Bar
  data={{
    labels:data.map(item=>item.x),
    dataset:[{
      data:data.map(item=>item.y),
      backgroundColor:data.map((item,index)=>index%2 === 0 ? 'red':'pink')
      ...otherOptionsOrStyles
     }] 
  }}
/>

hope this helps

Leave a comment