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

[CzarOfScripts]

Steps to reproduce

Link to live example: codesandbox.io

Steps:

1. Set dataset
2. Configure series
3. Specify datakey for axies
4. Specify different data for yAxis

Current behavior

I apologize for the English, I use a translator and in general I don't really understand how to correctly formulate the problem and its solution, but after watching the demonstration I think the problem and what I was trying to achieve will be clear.

My task is to make custom Labels for yAxis, and the problem is that I can't create a point that will be between two "labels", i.e. there is a label "Mid Developer" which has a value of "300" and there is a "Senior Developer" which has a value of "600". If I want to create a point that has the value "350" (i.e. between the two labels), the point will simply not be drawn and the chart will break (the points will not connect).

In the variant where we do not specify explicitly (or specify all that we can have) what values will be in data for yAxis, then there is a separate "tick" for this value, which would not be desirable.

Expected behavior

I wanted the point to be placed in between the "tick" without creating a new "tick" for itself.

Context

I wanted the point to be placed in between the "tick" without creating a new "tick" for itself.

Your environment

I'm use Google Chrome (126.0.6478.127)

npx @mui/envinfo

    System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 21.3.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.7.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (126.0.2592.81)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.5 => 11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.19
    @mui/icons-material: ^5.15.19 => 5.15.19
    @mui/material: ^5.15.19 => 5.15.19
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.15
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-charts: ^7.6.1 => 7.6.1
    @mui/x-date-pickers: ^7.7.0 => 7.7.0
    @types/react: ^18.2.66 => 18.2.78
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.4.5

Search keywords: I'm sorry, it's hard for me to articulate the problem

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