0

i am using react-chartjs-2 in a project and i am still trying to find a solution on how to color the evenly all the columns with the same logic of the image below enter image description here

i found that chartjs has plugins -> annotations to do that, but it seems that is not working.

This the link to my codesandbox. what I would like to do is color the columns alternately regardless of the data it receives for the x and y axes (dates, numbers, strings), with the settings that the graph currently has. I've seen some people suggesting to use plugins -> annotations in chartjs but trying it doesn't work. Let me know if you can help me, thank you!

codesandbox.io/s/adoring-bohr-y59hm5?file=/src/CustomChart.js

Luke
  • 25
  • 6
  • your codesandbox is not working. It says `This method is not implemented: Check that a complete date adapter is provided.` – StepUp Jul 29 '22 at 10:58
  • https://codesandbox.io/s/adoring-bohr-y59hm5?file=/src/App.js try here it is working for me – Luke Jul 29 '22 at 12:18

1 Answers1

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

CiK7
  • 21
  • 1
  • 3
  • i tried adding an array of colors manually into the codesandbol example, but it is coloring just the dots on every data: https://codesandbox.io/s/flamboyant-jepsen-ipfho1?file=/src/CustomChart.js – Luke Aug 01 '22 at 12:50
  • @Luke what kind of effect are you looking for? you code example uses a component not a – CiK7 Aug 08 '22 at 12:38
  • i don't need to make a bar chart. In the example, what I would like to try to recreate is a line graph, simply with the background graph columns of alternating colors (odd and even columns). They may look like bars but in truth I should just color the columns drawn by the graph. In the screenshot example i mean the grey and white columns. I just posted the bar screenshot as a referencefor thebackground, to explain better what i want to do – Luke Sep 02 '22 at 10:50