Allow static domains, to improve UX when toggling datapoints

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I’m currently working on a chart that starts with multiple bars being visible, that allows users to toggle them off so they can focus on a smaller set of datapoints. Recharts allows this toggling to be done very easily with the hide prop, but I’ve noticed that the domain of the axis will always adapt to fit only the currently displayed data. This negatively affects the user’s ability to make comparisons when toggling datapoints.

Minimal codesandbox example here

It would be great to include a way to set the domain of an axis as static, i.e. always including data even if it’s hidden. I’ve made local changes to generateCategoricalChart.tsx and can verify that the behaviour is easy to implement by removing the !item.props.hide check when filtering the graphicalItems.

If this feature is one you would consider implementing, I’d like to agree on the right API that would update those filter predicates, and I’d be happy to open a pull request with the implementation.

What does the proposed API look like?

I have two ideas for this API. My preference would be for this first approach, as I feel it’s the simplest:

<YAxis includeHidden /> // maybe `staticDomain` also works as a prop name?

We could also have a boolean flag on the graphical items themselves, so we can still ignore some items if we want:

<Bar onDomain hide={booleanState} /> // by default, `onDomain`'s value would be `!hide`

[neefrehman]

Thanks for the clarifying questions @ckifer, I certainly could have been clearer.

Just to clarify, can you give an example of what you want the chart to look like?

As far as the domain goes, it should behave a little like this forked sandbox repro. Though with preserved behaviour regarding animations and bar sizing/position.

With option one it looks like you only want the Y Axis scale to remain the same. With option two it looks like you want to add an option to control if the graphical item is included in the domain functionality. I might be misinterpreting the proposed API.

No you are correct! These two options provide different ways to achieve the same result, though one has more flexibility. Option one would simply ensure the domain is always static. Option two allows developers to choose when specific graphical items contribute to the domain calculation.

One example I thought of where option two may be useful is for a ComposedChart that contains two Bars and one Area. Perhaps the developer wants both bars to always contribute to the domain—regardless of if they are hidden—but wants to allow the domain to change if the Area is hidden. Setting the props on the individual items would allow them to achieve this.

Based on my interpretation of Rechart’s design approach (and selfishly, my current project’s requirements), option one seems to be the right choice, but I’m also open to option two being chosen.

Do you want the spaces to remain where the bars are and keep the Y axis the same? Or would you only want the option to keep the Y axis scale the same?

The latter.

[ckifer]

Totally understand that, hah. Will look at the PR. Thanks!