Logarithmic axes migration V4

[JHHattingh]

Expected behavior

Migrating from Chart.js V3 to Chart.js 4 should not change the gridline/tick spacing/selection behavior. I did not see anything in migration guide related to logarithmic charts.

Current behavior

The gridlines/Ticks created by Chart.js 4 is different from V3. Chart.js V3 has a more logical gridline/Ticks selection/Spacing.

Reproducible sample

https://codepen.io/JHHattingh/pen/GRXaZxo

Optional extra steps/info to reproduce

V4 https://codepen.io/JHHattingh/pen/GRXaZxo V3 https://codepen.io/JHHattingh/pen/eYLaZXP

Possible solution

Is there any way migrate my logarithmic chart to V4. Do I misunderstand the options for Logarithmic axis?

Context

Migration from Chart.js V3 to Chart.js V4

chart.js version

4.2.1

Browser name and version

N/A

Link to your project

No response

[LeeLenaleee]

This is intentional and happend here: https://github.com/chartjs/Chart.js/pull/9166

Reason I suspect there is nothing in the migration guide is that you as enduser don't have to migrate any code for this

[JHHattingh]

I dont completely agree with the new way chart.js calculates gridlines for logarithmic axes. A typical and I think most common logarithmic chart would have major gridlines at 0.1,1,10,100,1000 with 10 minor gridlines in between each major gridline. The minor gridlines are numerically equal intervals (1/10th of major gridline). This is the case in V3 and not the case in V4. V4 seems to choose un-equal intervals as seen in the reproducible example. If you Google Logarithmic scale the log10 scale is by far the most common one used. Like the attached image. These charts cant be created in Chart.js V4? Or is it possible?

Thank you!

[LeeLenaleee]

I can't say if the default implementation will give that result, I almost never work with logarithmic scales so don't have a lot of experience with that.

But if you really want the old behaviour nothing stops you to copy the source of the scale from the V3.9 branch and create a custom scale that you register and use

[JHHattingh]

Thank you for the advice. I think by default you wont be able to plot the example chart. Its the same as the reproducible example. Only difference is X and Y axes is swapped. I will either do custom scale or just stick to 3.9 for Log charts. This makes the Logarithmic scale on V4 unusable(with default implementation) for many different standard charts (Population Chart, IEEE Dip Diagram, Phase Diagram of Carbon Dioxide ect). The change in Logarithmic charts from V3 to V4 was listed as breaking change in milestones.

[vsambor]

I just encountered the same issue and spend few hours trying to understand what I did wrong.

The first grid line should be evenly spaced with next magnitude start, but it isn't

@JHHattingh did you found a way to solve this in v4?

[JHHattingh]

@vsambor. I could not solve this in V4. I just used V3.9 for the Log charts. Don't know why they changed it in V4. The V4 chart.js log chart is essentially unusable for any practical/common log chart. The gridline behavior of chart.js V4 log chart is completely different than any other charting lib.

[vsambor]

At the end I ended up doing the same, I patched the logarithmic code from v3.9, until this is solved. Thanks for your reply. Have a nice day!

[timbk]

I guess I ran into the same issue as others here. The log scale ticks are completely inconsistent in the current release (v4.4.8 as of writing this).

Minimal example to showcase my issues: https://codepen.io/tim_bk/pen/yyLrboq

Here is a screenshot of the generated ticks on the x-axis:

There is no 1.5 tick, but there is a 15 tick. I cannot imagine that to be intended behavior.

Having a tick at 15 is extremely uncommon and irritating in my opinion.