[docs] Add example to customise line interaction #18539
Conversation
|
Deploy preview: https://deploy-preview-18539--material-ui-x.netlify.app/ Updated pages: Bundle size reportTotal Size Change: 0B(0.00%) - Total Gzip Change: 0B(0.00%) Show details for 100 more bundles (22 more not shown)@mui/x-charts parsed: 0B(0.00%) gzip: 0B(0.00%) |
CodSpeed Performance ReportMerging #18539 will degrade performances by 20.8%Comparing Summary
Benchmarks breakdown
|
|
Very cool, thank you! |
Co-authored-by: Jose C Quintas Jr <juniorquintas@gmail.com> Signed-off-by: Alexandre Fauquette <45398769+alexfauquette@users.noreply.github.com>
| @@ -56,3 +56,16 @@ Notice that using another shape than "circle" renders a `<path />` instead of th | |||
| This modification implies a small drop of rendering performances (around +50ms to render 1.000 marks). | |||
|
|
|||
| {{"demo": "CustomLineMarks.js"}} | |||
|
|
|||
| ## Larger interaction area | |||
There was a problem hiding this comment.
Just realized we don't have a "highlight" section in the lines page. I wanted to compare this behavior to the original and couldn't easily find it. Maybe something we should add? And we could add this section as a sub-section of "Highlighting".
There was a problem hiding this comment.
Yes, all the highlight demos are in a dedicated page. Only the scatter chart has a section because of the voronoid specificity
| A small one to display the line. | ||
| And a larger one invisible that take cares of interactions. | ||
|
|
||
| This solution has an issue when lines cross over each other, as the highlight will not be on the line closest to the pointer, but by the last defined series. |
There was a problem hiding this comment.
I wonder if we proper solution would be similar to the voronoi we use for scatter? 🤔
There was a problem hiding this comment.
Probably something like
- Get pointer x value
- Compute series values at the given x
- Pick the series the closes to pointer's y value
| The line highlight has a narrow interaction area. | ||
| Before a proper solution get implemented, it's possible to use a workaround with slots. |
There was a problem hiding this comment.
| The line highlight has a narrow interaction area. | |
| Before a proper solution get implemented, it's possible to use a workaround with slots. | |
| A line becomes highlighted when a pointer is hovering over it. By default, a line has a stroke width of 2px, meaning there is a 2px area where the line becomes highlighted. | |
| While a permanent solution isn't implemented, it's possible work around this limitation with slots. |
| The idea is to have two paths. | ||
| A small one to display the line. | ||
| And a larger one invisible that take cares of interactions. |
There was a problem hiding this comment.
| The idea is to have two paths. | |
| A small one to display the line. | |
| And a larger one invisible that take cares of interactions. | |
| The idea is to have two paths: a small one to display the line, and a larger invisible one that handles the interactions. |
Docs example to answer a question from @Janpot
https://deploy-preview-18539--material-ui-x.netlify.app/x/react-charts/line-demo/#larger-interaction-area