Im trying to change the color of the grid lines since my background is dark. I have managed to change the color of the ticks, and the line itself. However I've been trying to change the grid color for almost two hours and haven't succeeded yet. Any help would be appreciated. Thanks!

<script>
                const <?php echo $info['alias'] . "xValues"?> = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
                const <?php echo $info['alias'] . "yValues"?> = [80, 60, 80, 60, 100, 80];
                new Chart("<?php echo $info['alias'] ?>", {
                type: "line",
                data: {
                    labels: <?php echo $info['alias'] . "xValues"?>,
                    datasets: [{
                    fill: false,
                    lineTension: 0,
                    backgroundColor: "white",
                    borderColor: "white",
                    data:  [{
                                x: 4,
                                y: <?php echo $nivel1?>
                            }, {
                                x: 8,
                                y: <?php echo $nivel2?>
                            }, {
                                x: 12,
                                y: <?php echo $nivel3?>
                            }, {
                                x: 16,
                                y: <?php echo $nivel4?>
                            }, {
                                x: 20,
                                y: <?php echo $nivel5?>
                            }, {
                                x: 24,
                                y: <?php echo $nivel6?>
                            }]
                    }]
                },
                options: {
                    legend: {display: false},
                    scales: {
                    yAxes: [{ticks: {min: 0, max:100, fontColor: 'white'}, gridLines: {display: false ,color: 'white'}}],
                    xAxes: [{ticks: {fontColor: 'white'}}],
                    y: {
                        grid: {
                            color: 'white'
                        }
                    }
                    }
                }
                });
            </script>

Im trying to change the color of the grid lines since my background is dark. I have managed to change the color of the ticks, and the line itself. However I've been trying to change the grid color for almost two hours and haven't succeeded yet. Any help would be appreciated. Thanks!

<script>
                const <?php echo $info['alias'] . "xValues"?> = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24];
                const <?php echo $info['alias'] . "yValues"?> = [80, 60, 80, 60, 100, 80];
                new Chart("<?php echo $info['alias'] ?>", {
                type: "line",
                data: {
                    labels: <?php echo $info['alias'] . "xValues"?>,
                    datasets: [{
                    fill: false,
                    lineTension: 0,
                    backgroundColor: "white",
                    borderColor: "white",
                    data:  [{
                                x: 4,
                                y: <?php echo $nivel1?>
                            }, {
                                x: 8,
                                y: <?php echo $nivel2?>
                            }, {
                                x: 12,
                                y: <?php echo $nivel3?>
                            }, {
                                x: 16,
                                y: <?php echo $nivel4?>
                            }, {
                                x: 20,
                                y: <?php echo $nivel5?>
                            }, {
                                x: 24,
                                y: <?php echo $nivel6?>
                            }]
                    }]
                },
                options: {
                    legend: {display: false},
                    scales: {
                    yAxes: [{ticks: {min: 0, max:100, fontColor: 'white'}, gridLines: {display: false ,color: 'white'}}],
                    xAxes: [{ticks: {fontColor: 'white'}}],
                    y: {
                        grid: {
                            color: 'white'
                        }
                    }
                    }
                }
                });
            </script>

• javascript
• php
• html
• charts
• chart.js

• 1 What version of chart.js are you using? Your scale options are a combination that can't work: xAxes: [...] and yAxes: [...] are valid for chart.js versions 2, while y: {...} works for newer versions, including the latest 4.4.8 version – kikon Commented Mar 8 at 6:18
• This snippet shows "Uncaught SyntaxError: Unexpected token '<'" unrelated to the question. Please fix it. – Sergey A Kryukov Commented Mar 8 at 13:27

1 Answer 1

The problem is that you are using a mixed approach: some options are specified in the legacy format (v2) and some in the new format (v3). If you are using Chart.js v3 or later, to correctly change the grid color, you need to implement the options object (inside data obj) like this:

options: {
        plugins: {
            legend: { display: false }
        },
        scales: {
            x: {
                ticks: { color: 'white' },
                grid: { color: 'white' } // vertical line color
            },
            y: {
                ticks: { min: 0, max: 100, color: 'white' },
                grid: { color: 'white' } // horizontal line color
            }
        }
    }

instead of yAxes: [...] / xAxes: [...] (v2) -> y: {...} / x: {...} (v3+)

gridLines.color (v2) -> grid.color (v3)

lineTension (v2) -> tension (v3)

If you want to use (v2):

y: { grid: { color: 'white' } } — this syntax belongs to Chart.js v3. In Chart.js v2, you need to use yAxes: [{ gridLines: { color: 'white' } }]

You mixed gridLines: { display: false, color: 'white' }, which conflicts. If display: false, then color has no meaning because the grid is off.

Incorrect document.getElementById in new Chart(). In v2, you need to pass a Canvas element (document.getElementById("id")), not a string with an ID..

new Chart(document.getElementById("<?php echo $info['alias'] ?>"), { 
    /* `type` obj,`data` obj are the same. `option` obj below. */
}

options: {
    legend: { display: false },
    scales: {
        yAxes: [{
            ticks: { min: 0, max: 100, fontColor: 'white' },
            gridLines: { color: 'white' }
        }],
        xAxes: [{
            ticks: { fontColor: 'white' },
            gridLines: { color: 'white' }
        }]
    }
}