Scales defaults for "grid.color" and "ticks.color" not updating

[teodorachiosa]

Expected behavior

Just like the legend and tooltip color, I expect the scale colors to be updated when the color changes.

Current behavior

The scale grid color and ticks color only update once. Updating the chart (chart.update()) doesn't trigger the color changes.

Reproducible sample

https://codepen.io/teodorachiosa/pen/yLmNPMy

Optional extra steps/info to reproduce

No response

Possible solution

No response

Context

We use a theme switcher to change between a light and a dark mode. We needs to update the defaults when the theme changes.

chart.js version

4.4.4

Browser name and version

Chromium: 129.0.6668.70 (Official Build) (64-bit)

Link to your project

No response

[apurva63]

The issue you're encountering occurs because Chart.defaults is only applied when the chart is first initialized. Changing Chart.defaults after the chart has been created does not automatically update the existing chart's settings. Chart.defaults are global and do not affect already rendered charts.

To change the chart's colors dynamically after initialization, you should directly modify the chart's options instead of Chart.defaults. Here's how you can fix this:

`function changeScaleColors() {
myChart.options.scales.x.ticks.color = 'teal';
myChart.options.scales.x.grid.color = 'teal';
myChart.options.scales.y.ticks.color = 'teal';
myChart.options.scales.y.grid.color = 'teal';

myChart.options.plugins.legend.labels.color = 'teal';
myChart.options.plugins.tooltip.titleColor = 'teal';
myChart.options.plugins.tooltip.bodyColor = 'teal';

myChart.update();

}`