React Chartjs 2 display axes above datasets backgroundColor

Question

I have a Line Chart with chart.js and one of the lines has to fill the background delimited with another line. It works well, but how can I do it to see chart axes when the background is filled ??

Here is an example of what I currently have: codeSandBox

Answer 1

From playing around with it, most of your options are not being recognized at all.

I played with the colors, layouts, displaying things, etc., and nothing made a difference. The only thing that's making a difference is the responsive key.

Normally, the way you would change the way the lines would be displayed is like this:

const options = {
  legend: { display: false },
  title: { display: true, text: "Line Chart" },
  scales: {
    yAxes: [{
      gridLines: {
        z: 99
      },
      ticks: {
        beginAtZero: true
      }
    }]
  },
  xAxes: [{
    gridLines: {
        z: 99
    }
  }],
  responsive: true
};

In your options object, under the scales key, under each axis, you can set the z-index of the gridlines. This set of options should work, according to this.

However, because your options aren't being recognized, none of the options here are even taking effect in the first place.

I haven't used Chart.js in react so I can't really help you more than that, in this aspect.

However, what I can say does work, is in line 10 in your sample code in the sandbox, I changed the hex value to rgba: backgroundColor: "rgba(235, 245, 251, 0.5)",

It's the same color, only a little lighter, but what is most important is you can see the grid lines.

https://i.sstatic.net/VQ7v3.png

My advice is if you're only using React for this chart, don't. It seems to be making things harder.