CODEWITHSUNDEEP
javascriptchart.js
code-8
code-8

Reputation: 58790

How to change chart.js grid, and axis color?

I am using chart.js and jQuery, my chart look like this on light mode.

enter image description here

Lately, I added a .dark class to my body

body{
    background-color: white;
    color: black;

}

body.dark {
    background-color: black;
    color: white;
}

enter image description here

I can't see the x,y axis line or grid. How can I change the color of that to white ?

Upvotes: 0

Views: 2446

Answers (1)

Yash Verma
Yash Verma

Reputation: 272

In chart.js there is a configuration for cartesian axes, as per the docs . You can change the config like this to handle the colour of the X and Y axes.

const config = {
  type: 'bar',
  data,
  options: {
    scales: {
      x: {
        grid: {
          borderColor: 'white'
        }
      },
      y: {
        grid: {
          borderColor: 'white'
        }
      },
    }
  }
};

Upvotes: 1

Related Questions