[charts] Improve docs about how to pick the correct scaleType about mui-x

[CzarOfScripts]

Component: LineChart

[alexfauquette]

Here is the solution: https://codesandbox.io/p/sandbox/graph-axis-name-forked-2ccmkc?file=%2Fsrc%2FApp.tsx%3A162%2C13

1. pick the correct scale

scaleType: 'point' is here for the case you have categories (you know your data will be in categories and never outside).

You need to accept any king of number. Then I would recommend to use the default scale (scaleType: 'linear') you can simply do not specify a scale since it's the default one.

2. fix the ticks

Now the axis is doing its best to show meaning full ticks. Since it goes from 0 to 1200 it is proposing 0, 200, 400, 600, 800, 1000, 1200.

But we have labels for 100, 300, 600, 800, 1000, 1200.

The solution is to specify in the axis definition tickLabel={[ 100, 300, 600, 800, 1000, 1200 ]} which forces the tick to be displayed at those values.

If that does solves your issue, please consider closing it

[CzarOfScripts]

@alexfauquette, Oh, thank you very much! I have some more questions though, why the line axisHighlight={{ x: "none", y: "line" }} is not drawn correctly for the points? Is it some kind of bug?

Is there any way to increase the distance between the "tickLabel"? I got it like this (the first and the second are quite close to each other):

Ideally, I'd like to have equal distance between "tickLabel" despite the difference in values. This should work:

[alexfauquette]

Ideally, I'd like to have equal distance between "tickLabel" despite the difference in values. This should work:

That does not sound feasible. Do have that you would need to create your own weird scale type. Where you can end up with moving for 0 to 100px represent an increase of 50, and moving from 100px to 200pc represent an increase of 236

You have two standard alternatives:

If the data does not represent something linear you can try the 'log' or 'sqrt' scale type

The other option is to display all the tick and show labels only on the meaning full one

---

axisHighlight={{ x: "none", y: "line" }} is not drawn correctly for the points

Your y-axis probably still have a dataKey and/or data property. The highlight will then only be visible for those values

[CzarOfScripts]

If the data does not represent something linear you can try the 'log' or 'sqrt' scale type

With log all the points moved to the upper left corner, and with sqrt it got even worse. Okay then, if it can't be fixed so easily, I'll have to leave it like that.

Your y-axis probably still have a dataKey and/or data property. The highlight will then only be visible for those values

Yes, my axis has dataKey="value", I removed that and now this line moves freely behind the cursor but is not "magnetic" to points. Is it possible to show it when hovering over any point?

[alexfauquette]

Is it possible to show it when hovering over any point?

Not for now. Those highlight lines are here to show axis values, and not points.

To do it, you will probably need to use useHighlighted to know if an item is highlighted, and then render a custom line at this value

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@CzarOfScripts: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.