Chartjs-React Chartjs 2 display axes above datasets backgroundColor

by

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.stack.imgur.com/VQ7v3.png

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

Leave a comment