Open halfacandan opened 1 month ago
For now, you can either use
You could consider using useHighlighted()
to get information about the current series with highlight. Those hooks are not yet documented
Thanks @alexfauquette. I have tried your second suggestion already and documented what I believe is a bugged behaviour: https://github.com/mui/mui-x/issues/13945
Do you have any example code for how to use the "useHighlighted()" function as that sounds ideal?
Do you have any example code for how to use the "useHighlighted()" function as that sounds ideal?
Not yet. We did not decided a strategy about how to document such hooks
For anyone else interested in using the "useHighlighted()" function, here's some hacky code that you can use to capture the value
const [highlightedSeriesId, setHighlightedSeriesId] = React.useState<string|null>();
function UseHighlighted(): JSX.Element {
const { highlightedItem } = useHighlighted();
setHighlightedSeriesId(highlightedItem?.seriesId?.toString() ?? null);
return <></>;
}
They you just nest a
<ResponsiveChartContainer>
<UseHighlighted />
<AreaPlot />
<ChartsTooltip trigger="axis" slots={{ axisContent: formatTooltip }} />
</ResponsiveChartContainer>
You can then use the captured highlightedSeriesId value to identify a specific data series in your custom tooltip function.
If your custom component is inside the <ResponsiveChartContainer />
you don't need to save it in a dedicated state (it's already in a context)
The slots
are expecting components to render. To avoid losing internal state, those components should be declare outside of the function rendering the charts
+ const FormatTooltip = (props) => {
+ console.log(props.dataIndex); // This is the index of the x-axis
+ console.log(JSON.stringify(props)); // THe props do not contain any reference to which series is being hovered over };
+ }
export default function SwitchSeriesType() {
- const formatTooltip = (props) => {
- console.log(props.dataIndex); // This is the index of the x-axis
- console.log(JSON.stringify(props)); // THe props do not contain any reference to which series is being hovered over
- };
return (
<Box sx={{ width: '100%' }}>
<div>
<ResponsiveChartContainer
Here is a quick example, highlighting the current series, by increasing a div size
https://stackblitz.com/edit/react-hydnyg-zja5ef?file=Demo.js,package.json
Thank you for the example code @alexfauquette :D
The current "solution" of this issue will probably be easier to create and document after #13819
Summary
Feature: Add a "seriesIndex" Property to the AxisContent Custom Charts Tooltip
Scenario: User hovers their mouse over a data series in a stacked area chart Given a ResponsiveChartContainer which contains an AreaPlot with a ChartsTooltip And an array of data series called "set1" & "set2" which are stacked in a stack called "total" When the properties on the ChartsTooltip are set to trigger = "axis" and slots = {{ axisContent: formatTooltip }} And the user hovers their mouse over "set2" in the rendered chart Then the formatTooltip function should have access to dataIndex i.e. the x axis's value (which it currently does) And the formatTooltip function should have access to another property which identifies the data series that has focus e.g. "set2"
Examples
Actual Behaviour
Only the dataIndex is available, no reference to the data series which has focus is available: https://stackblitz.com/edit/react-hydnyg-hzvrzt?file=Demo.js
If I stringify the props passed to the "formatTooltip" function (shown below), I have access to the "dataIndex" and "axisValue" properties to identify the x-axis but nothing refers to the data series which is being hovered over. I added some "highlightScope" properties to the data series to show that a reference to the hovered series is stored somewhere.
Example code
Motivation
In the Axis tooltip, I would like to have an option to visually highlight which of the series is currently hovered over by the user's mouse e.g. with emboldened text. This gives users a simple visual prompt which is not dependent on colour or pattern.
Search keywords: ResponsiveChartContainer AreaPlot ChartsTooltip