VictoryCursorComponent Linesegment goes outside of the graph

[andytubeee]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Victory version

37.3.5

Code Sandbox link

No response

Bug report

VictoryZoomCursorContainer, the line segments goes outside of the chart (e.g to the left of the x-axis).

This issue is that the chart domain of xRange is large, and I used Zoom + Cursor container to zoom into a subset, allowing panning functionality. Which causes Cursor Container's line segnment to render outside of current viewportX 

I think edge-case is a better term than bug for this one.

The documentation states

The cursor moves with the mouse (or on touch on mobile devices) along the visible domain of the chart.

Since the domain of the chart is 7-days, I use zoom container first to "zoom" into 1 day, and allows the user to then pan to left and right within the total domain xRange. The cursor container (cursorComponent) neglects the x-axis.

This edgecase is most likely due to the usage of createContainer between zoom and cursor containers. VictoryZoom's clipping isn't operating on the cursor container to reflect what the "visible-domain" is.

Steps to reproduce

Using VictoryCursorContainer

Expected behavior

It should stop rendering the line segment if cursor is outside of the chart

Actual behavior

Environment

- Device:
- OS:
- Node: v20.5.1
- npm: 10.8.3

[andytubeee]

[andytubeee]

Or is there way to not render the cursorComponent without using disable={true}, by using tracking the value using onCursorChange?

[github-actions]

This issue is stale because it has been open for 90 days with no activity. If there is no activity in the next 7 days, the issue will be closed.