mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.14k stars 1.29k forks source link

[charts] Axis not plot if the domain contains only one value #13973

Closed Ashiq5 closed 1 month ago

Ashiq5 commented 2 months ago

Steps to reproduce

Link to live example: (required)

Steps:

  1. Check out this live link: codesandbox After the dependencies are installed, you should see a line chart with no Y-axis label and ticks.
  2. However, if one of the data values is changed to something else (other than -1), Y-axis labels and ticks appear fine.

Current behavior

Missing Y-axis labels and ticks when all the values in a data are equal.

Expected behavior

Y-axis labels and ticks should appear irrespective of data values.

Context

Display Y-axis label and ticks irrespective of the data values.

Your environment

Browser: Google Chrome

Search keywords: Y axis ticks and labels missing

Ashiq5 commented 2 months ago

I am not 100% sure whether there is a certain config to enable this. But from looking at the doc, it seems like a bug to me. Please let me know if there is a easy hack to get around this and I will close the issue. Thanks.

alexfauquette commented 2 months ago

This solves your issue

yAxis={[{ min: -2, max: 1 }]}

But effectively it's weird. We should have a deeper look at it to know where it fails. I guess it's something like "The domain is [-1, -1], then it's empty, noting to display"

alexfauquette commented 2 months ago

Seems we have room for improvement.

The reason why no axis is displayed, if this kind of condition

https://github.com/mui/mui-x/blob/0fb15c6f0782cadb08011d3b47a9917f16e5230d/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx#L147

They got added (in x axis, y axis and useTicks) when we added support for the "no data" overlay

The root cause is that the axis provider correctly compute that there is no data to display. It returns extremums [null, null]. But from those extremums, we generate a scale, which will transform that into scale.domain() = [0, 0]

https://github.com/mui/mui-x/blob/0fb15c6f0782cadb08011d3b47a9917f16e5230d/packages/x-charts/src/context/CartesianProvider/computeValue.ts#L171-L180

To spot that we use domain[0] === domain[1] not having the usecase of this issue in mind.

The best fix might be to add a property to the axis object noDataAssociated: extremums[0] === null || extremums[1] === null

JCQuintas commented 1 month ago

Fixed in https://github.com/mui/mui-x/pull/14191

github-actions[bot] commented 1 month ago

:warning: 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.

@Ashiq5: 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.