-
Notifications
You must be signed in to change notification settings - Fork 121
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(interactions): stop axis line from cutting off cursor line on hover #1438
Conversation
@markov00 I think removing the zIndex computations from the crosshairs component was fine and is already done with this PR. However the issue I'm facing now is that the highlighter incorrectly works with bar charts if the crosshair component is rendered below the XYChart component:
Oct-27-2021.09-02-00.mp4However switching the ordering of the components is great in terms of the axis covering the crosshair: Oct-27-2021.09-02-42.mp4I was hoping to conditionally render the components based on the type of cartesian chart, does this logically make sense? |
Hey Rachel, I saw the issue you have described, it probably need a different way of handling the problem, let me think about it and I will be back with a possible different solution |
hey @rshen91 I've merged my PR this morning with the initial part of the fix. |
Duplicate 1438 |
Summary
The crosshair does not compute the zIndex and will now render on top of the XYChart to avoid cases where the cursor is hidden over the canvas element of the chart.
Details
This PR removes calculating the zIndex for the crosshair component. I had some issues reproducing this bug like in https://codesandbox.io/s/upbeat-shirley-rjqtm?file=/src/App.tsx:0-1090 but created a story within
Grids
with a similar story showing the axis line does not overlap and cover the theme vertical line, the red line.Issues
Closes #1283
Checklist
:xy
,:partition
):interactions
,:axis
)closes #123
,fixes #123
)