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

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]

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

[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?