[question] How to display band as selected (controlled)

[jvskriubakken]

The problem in depth

I'm looking for a way to select an x value in bar chart. I'm thinking of highlighting the x band in the same way it's done when hovering.

The idea is to visualize which month is selected inside the chart. In the image above you see a month selector in the upper right corner. As the user changes the month I want to highlight that month in the chart (more or less in the same manner it's done when hovering the bars/bands along the x-axis).

Maybe I need to write a custom component, that displays just like the hovering backdrop on x axis band?

Your environment

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: charts highlight band
Order ID: #54140

[alexfauquette]

Maybe I need to write a custom component, that displays just like the hovering backdrop on x axis band?

I'm not sure about what you mean by "select an x value in bar chart"

You can control the highlight state: https://mui.com/x/react-charts/highlighting/#controlled-highlight

If you want something that look similar to the hover effect, I can recommend you to creat your subcomponent using the band scales

https://mui.com/x/react-charts/components/#scales

Here is the code of the axis highlight. It probably do too many stuff compared to what you're looking for but can be an example. https://github.com/mui/mui-x/blob/master/packages/x-charts/src/ChartsAxisHighlight/ChartsAxisHighlight.tsx

[jvskriubakken]

Thank for the guidance! I will try it out!

[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

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