[charts] Allow basic customization of Sparkline y-axis

[marvinruder]

Summary

Right now the scaling mechanism of the y-axis in sparkline charts is somewhat obscure to me, and there are no parameters that influence that scale. It would be great to at least have a way to set the min and max values on the y-axis.

Examples

The following two sparklines have the same parameters except for color and dataset:

(The numbers below the slider on the left show the min and max values in the datasets)

Both svgs have a height of 42px. The upper one’s line is 32px high, the lower one’s line is 14px high. Why? How are the min and max values of the y axis calculated?

Motivation

I want my sparklines to fill the entire area made available to the svg element, i.e., the min and max values of the dataset should match the min and max values of the y-axis. A property for configuring those axis values would allow such customization.

Search keywords: sparkline

[alexfauquette]

Both svgs have a height of 42px. The upper one’s line is 32px high, the lower one’s line is 14px high. Why? How are the min and max values of the y axis calculated?

Surprising that you don't have access to the y-axis config. That's definitely something we could fix.

The reason why the chart does not fill the entire space is the use of .nice() from D3js to define ranges. We use it it to ensure ticks will have nice values, but in your use case, the value varies between 189 and 267, I assume it extends the range to 100, 300 which leaves a lot of white space.

We coudl propagate the yAxis in sparkline, and add a parameter skipNice that would skip this step

[jisotalo]

+1 The min and max values for y-axis would definetely be an important feature!

For example, if plotting percentage data (0...100%) now with dataset containing only small values (say between 0...20%), the plot scales between that range and user could get an idea of high values.

By setting y-axis to always be 0...100%, it would make more sense.

[alexfauquette]

The next release will allow you to specify the min/max of y-axis.

We are still thinking about what could be a good DX to take control of this nice() step

[alexfauquette]

@JCQuintas what do you think about this property?

/**
 * Defines the axis scale domain based on the min/max values of series linked to it.
 * - 'nice': Uses the `.nice()` method from d3-scale to round the domain at human friendly values.
 * - 'strict': Set the domain to the min/max value displayed. No extras space is added.
 * - function: takes as an argument an array with the min/max displayed values, and return the domain.
 */
domainDefinition?: 'nice' | 'strict' | ([Value, Value]) => [Value, Value]

[JCQuintas]

Seems promising. Not sure about the naming, maybe domainRange? domainLimit?

[alexfauquette]

Will go with domainLimit since domainRange mixes two notions of D3: domain (the values) and range (the px)

[alexfauquette]

If someone wants to pick this issue, here are the file of interest

mui-x/packages/x-charts/src/internals/computeAxisValue.ts

Lines 207 to 210 in 9fd4c04

	// TODO: move nice to prop? Disable when there is zoom?
	const scale = getScale(scaleType, axisExtremums, zoomedRange).nice(rawTickNumber);
	const [minDomain, maxDomain] = scale.domain();
	const domain = [axis.min ?? minDomain, axis.max ?? maxDomain];

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

Note

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