Chart.js Version 3: how to set the different color for tick lines and gridlines

Question

Is there a way to set a different color for chart tick line and gridlines color, using chart.js 3.x? When I change the gridline color then tick color also changes, I want to have a different color for the tick and gridlines.

I tried with the below config, but it changes color for both tick and gridlines.

var config = {
    type: 'line',
    data: {
        datasets: [],
    },
    options: {
        scales: {
            xAxes: {
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    color: "#FFFF00",
                    zeroLineColor: "#00FFFF",
                    zeroLineWidth: 1

                }
            },
            yAxes: {
                ticks: {
                    beginAtZero: true
                },
                gridLines: {
                    color: "#FFFF00",
                    zeroLineColor: "#00FFFF",
                    zeroLineWidth: 1
                }
            }
        }
    }
};

How to use scriptable options to set a different color for tick and gridline?

Answer 1

An easy way is to set Chart.defaults.borderColor to a new value before drawing your chart.

For example:

    Chart.defaults.borderColor = "rgba(255,255,255, .2)"; // White translucent, good for dark themes 
    let chart_options = {
      type: 'bar',
      data: {
        labels: labels,
        datasets: [{
          data: data_points,
          backgroundColor: colors
        }]
      }
    }
    var ctx = document.getElementById('some-chart').getContext('2d');
    new Chart(ctx, chart_options);