Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
Jack2104 opened this issue Jan 27, 2022 · 7 comments

Comments

@Jack2104
Copy link

Jack2104 commented Jan 27, 2022

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:
image

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:
image

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

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 etimberg added this to the Version 3.8.0 milestone Feb 12, 2022
@etimberg
Copy link
Member

etimberg commented Apr 2, 2022

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
Copy link
Contributor

thabarbados commented Jul 28, 2022

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
Copy link
Member

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

@Jack2104
Copy link
Author

@thabarbados wow, thank you!

@kurkle
Copy link
Member

kurkle commented Jul 29, 2022

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
Copy link
Contributor

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
Copy link
Member

kurkle commented Aug 1, 2022

Can be closed as #10527 was merged?

@etimberg etimberg closed this as completed Aug 2, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants