search

mui / mui-x

MUI X: Build complex and data-rich applications using a growing list of advanced React components, like the Data Grid, Date and Time Pickers, Charts, and more!
https://mui.com/x/
4.53k stars 1.31k forks source link

[charts] line chart tooltip hover issue #13615

Closed MainaMwangiy closed 4 months ago

MainaMwangiy commented 4 months ago

Steps to reproduce

Link to live example: (required)

Steps: Check this link- https://stackblitz.com/edit/react-udtkt5?file=Demo.js

Current behavior

Currently it it does not hover on one single point. it shows the same value all through on hover when the points are different and have different dates and values for the dates.

Expected behavior

I should be able to hover for a single point.

Context

No response

Your environment

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

Search keywords: line chart tooltip

michelengelen commented 4 months ago

Hey @MainaMwangiy Thanks for reaching out here.

@JCQuintas could you help with this?

JCQuintas commented 4 months ago

Hi @MainaMwangiy, it seems your setup is a bit different than what we expect, so it is causing issues when rendering. I don't know exactly how you want your chart to look, but there are potentially two ways to solve your issue.

  1. Change your categories array to be ordered. The X axis scaleType: 'time' requires values in ascending/descending order. https://stackblitz.com/edit/react-udtkt5-dynxub?file=Demo.js

Alternatively

  1. If your categories is in the correct order you want to display. You can change the X axis scaleType to 'band' and it will display correctly. https://stackblitz.com/edit/react-udtkt5-wxlw6x?file=Demo.js
MainaMwangiy commented 4 months ago

Hi @JCQuintas for the two suggestions and link for the solutions. They have fixed my issue. It seems ordering my categories in ascending/descending order fixes the issue. Thanks

github-actions[bot] commented 4 months ago

:warning: 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.

@MainaMwangiy: 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.