Chart.js axes and gridlines get messed up when changing axis type from time scale to linear/logarithmic scale

[Jack2104]

Expected behavior

When I switch from a time scale axis to a linear or logarithmic scale, the axes should be properly formatted. When switching from time to logarithmic, the graph should look like this:

Current behavior

When the axis type is changed from linear/logarithmic to time, everything works perfectly. However, when I change a time scale axis to linear/logarithmic, the tick numbers are incorrect and the axes get visually messed up.

Here is what the graph looks like with a time scale axis:

And then, what the graph looks like one the user changes to logarithmic axes:

This issue also occurs when switching to a linear axis type but it's less noticeable.

Reproducible sample

https://codepen.io/jack2104/pen/zYPxLZd

Optional extra steps/info to reproduce

Note how the log axis is (admittedly slightly) messed up when switching (on the right side of the graph, the top and bottom gridlines are cut off). To see what it should look like, set the axis type to logarithmic within myChart and refresh the pen (from there, you can also toggle the axis type to time and see how the ticks are messed up).

All I'm doing in my actual project is using vue to change the axis type and then refreshing the chart:

// Chart reference
const chartRef = ref(null);

// Watch the vuex store value that holds the axis type
watch(() => store.state.chart_settings.xAxis["scale"], () => {
    // Set the axis type in the chart settings
    chart.options.scales.xAxis.type = store.state.chart_settings.xAxis["scale"];
    
    // Update the chart  
    chartRef.value.update();
});

const chart = {
    ...
    options {
        scales {
            xAxis: {
                type: "time", // Changes when vuex store value changes
            }
        }
    }
    ...
}

Then, as can be seen above, when the vuex store value changes for the scale type, the chart settings are updated and the chart canvas is refreshed.

Possible solution

This doesn't happen when switching from logarithmic to linear and vice versa, so I know it's something to do with the switch from a numerical axis to a time scale axis. I have any idea how to fix it though...

chart.js version

3.6.2

Browser name and version

Chrome 97.0.4692.99

[etimberg]

Seems like part of this is options related. When the logarithmic scale is created at the start the 300 and 400 tick labels are hidden because the logarithmic formatter only shows 1,2,5, and 10 but when the scale is changed from a time scale the ticks are labelled. It's almost as if the new scale is not created with the correct options. It's almost as if the old resolved options are being assigned to the new scale

[thabarbados]

Hello @Jack2104, I tried to fix this bug and found it easy to set with an additional option in the scale config.
The chart will redraw correctly if you add bounds: 'ticks' in the scale options.
You can see the result here. I just added a line to your codepen.

@etimberg do you think adding info about this to the docs is necessary?

[etimberg]

A documentation fix sounds fine to me. @kurkle @LeeLenaleee any objections?

[Jack2104]

@thabarbados wow, thank you!

[kurkle]

Looks like the log scale does not work with bounds: 'data':
https://codepen.io/kurkle/pen/MWVOqPJ

So. The issue is misbehaving scale(s) with some time scale defaults and/or the inheritance of default options from previous scale type when type is changed. Not sure added documentation is proper fix for this.

[thabarbados]

Error due to this condition: https://github.com/chartjs/Chart.js/blob/master/src/scales/scale.logarithmic.js#L127. data doesn't recalculate the scale.

[kurkle]

Can be closed as #10527 was merged?