adobe/react-spectrum-charts

Support custom range on Y axis

Opened this issue · 0 comments

Provide a general summary of the feature here

Add support for taking the range prop of Axis and applying it to the metric/Y axis of a chart so that it can support custom ranges (and not always start at 0).

🤔 Expected Behavior?

Right now the Axis component takes a range prop (documented here), but that only seems to apply to the X axis (see this story demonstrating the usage). I would expect that the props would apply to the Axis regardless of which axes it represented.

💁 Possible Solution

I think that the range prop that's already present on the Axis component should be used to define a custom range for any axis.

Additionally, I think that an optional prop might also be added, something like fitRange: boolean that auto-fits the axis to the minimum and maximum values of the chart it represents (assuming a numeric axis), with a small buffer of ~10% the max value to add to the max and min of the range so that the chart doesn't touch the maximum and minimum values. The minimum value should probably be stopped at 0 if the buffer would've taken it lower than 0 (but not if the minimum chart value is below 0). The reason for adding this prop would be purely for convenience, since I believe this is what the range would most likely include if it was provided.

If we want to provide something a little more flexible, fitRange could be a number instead of a boolean that defines the buffer size as a percentage. Just spitballing here.

🔦 Context

When plotting a line chart, the line becomes more and more flat the larger the numbers are, since the Y axis range always starts at 0. This takes away the ability of users to quickly interpret a line's peaks and valleys at a glance, because the maximum and minimum value of the line are within ~10px of vertical space on the screen. If a custom range could be provided to the Y axis, that issue could be solved.

The biggest argument against doing this is that it may potentially mislead the user, since the chart they look at can now represent any range instead of charts with the same baseline. I think this is a valid argument, but shouldn't be something that this library enforces. The developers using this library (presumably) know what their users are and are not likely to get confused by, and so the decision of how to scale the chart should be left up to them. I think it'd be wise to point out this potential drawback in the wiki or documentation of this library in the Axis props.

💻 Examples

No response

🧢 Your Company/Team

Adobe Analysis Workspace