I can't change the color of the grids in Chart.js

by

I’m using Chartjs and I’m having problems with some properties, the page can be toggled in dark and light mode with a switch. I found how to change the color of the texts to be seen in dark mode with ‘Chart.defaults.global.defaultFontColor’ and it works fine, but when I try to change the color of the grids with ‘Chart.defaults.scale.gridLines.color’ it doesn’t work, and no matter if I use ‘Chart.defaults.scale.gridLines.display = false’ or another grid’s property, the lines don’t change.

The grid does not change

I downloaded the Chart.js’ js file and put it in the same folder as the project folder:

<script type="text/javascript" src="js/functions.js"></script>
<script type="text/javascript" src="js/Chart.min.js"></script>

The chart I am using is the same as in the documentation: https://www.chartjs.org/docs/latest/getting-started/

This is the function associated with the switch:

function changeTheme() {
    var checkbox = document.getElementById('switch');
    if (checkbox.checked == true) {
        document.documentElement.setAttribute('data-theme', 'dark');
        localStorage.setItem('data-theme', 'dark');

        Chart.defaults.global.defaultFontColor = 'rgba(255,255,255,1)'; //This works fine
        Chart.defaults.scale.gridLines.color = 'rgba(255,255,255,1)'; //The line that should change the grid color

    }
    else {
        document.documentElement.setAttribute('data-theme', 'light');
        localStorage.setItem('data-theme', 'light');

        Chart.defaults.global.defaultFontColor = 'rgba(0,0,0,1)'; //This works fine
        Chart.defaults.scale.gridLines.color = 'rgba(0,0,0,1)'; //The line that should change the grid color

    }
    Chart.helpers.each(Chart.instances, function (instance) {
        instance.chart.update();
    });

    console.log(Chart);
}

Edit:
I checked that the gridLines.color property does exist, and changes its value, but the chart is still not affected.
Properties

Thanks!

36 thoughts on “I can't change the color of the grids in Chart.js”

Leave a Comment