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

[Ashiq5]

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]

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]

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]

Seems we have room for improvement.

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

mui-x/packages/x-charts/src/ChartsYAxis/ChartsYAxis.tsx

Line 147 in 0fb15c6

if (domain.length === 0 || domain[0] === domain[1]) {

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]

mui-x/packages/x-charts/src/context/CartesianProvider/computeValue.ts

Lines 171 to 180 in 0fb15c6

	const extremums = [axis.min ?? minData, axis.max ?? maxData];
	const rawTickNumber = getTickNumber({ ...axis, range, domain: extremums });
	const tickNumber = rawTickNumber / ((zoomRange[1] - zoomRange[0]) / 100);
	const zoomedRange = zoomedScaleRange(range, zoomRange);
	// TODO: move nice to prop? Disable when there is zoom?
	const scale = getScale(scaleType, extremums, zoomedRange).nice(rawTickNumber);
	const [minDomain, maxDomain] = scale.domain();
	const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];

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]

Fixed in #14191

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

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