[charts] Support for controlled highlighting on axis value

[jvskriubakken]

Search keywords

highlighting axis

Latest version

• I have tested the latest version

Summary

I need support for controlled highlighting of chart where I highlight a value on the x-axis, rather than one item or series.

The image shows uncontrolled highlighting. I cannot see any example in the docs that does this the controlled way?

Examples

No response

Motivation

I have chart displaying stacked bars on a band axis displaying months.

I want to highlight the month in the chart (.ie. displaying that darker square around the stacked bars).

Order ID or Support key 💳 (optional)

No response

[alexfauquette]

There is an ongoing PR on this topic #17900

I want to highlight the month in the chart (.ie. displaying that darker square around the stacked bars).

I'm not sure tu understand what you want to achieve.

The issue with controlling the axis highlight is that you will frequently re-render your chart, because pointer moves from one value to another will update the state of the parent.

We could have a intermediate solution which is to build a hook useChartAxisHighligh() that returns the highlighted axis value.

This hook could be used anywhere inside the ChartsDataProvider

[jvskriubakken]

Ok. I'll try to explain again what I'm after...

Imagine I can navigate to a page containing the chart above. And that the search params to the page contains the date/month I want to highlight in chart (ex: 2023-03). Based on that given month I want to highlight the chart, like in the example above. The chart above contains 4 series, which are stacked. I only find examples in the docs on how highlight (controlled) series or items. No example of on how to highlight on x-value, which should then highlight all items across series with the given x value.

[alexfauquette]

Ok, then the proposed PR should solve your issue. We still need to discuss some internal details before merging it

Thanks for the clarification. The fact that the controlled value comes from the search params is insightful. It means we should go on a controlled version instead of providing hooks. Could also be interesting to have an initialAxisHighlight such that the search param set the initial highlight and then user can modify it

[jvskriubakken]

Great. The input does not need to come from url search params either. Just another component outside the chart that let the user select a date/month/value-on-the-x-axis.