VictoryLine labels not hidden inside VictoryZoomContainer

[YeyoM]

Is there an existing issue for this?

• [X] I have searched the existing issues

Code of Conduct

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

Victory version

37.0.2

Code Sandbox link

https://codesandbox.io/p/devbox/victoryline-labels-not-hidden-inside-victoryzoomcontainer-nsryjp?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cly6jvigm00062v6nfkqr5uqp%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cly6jvigl00022v6ncnvuonxl%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cly6jvigl00042v6n8x2dswdb%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cly6jvigl00052v6nnguozdfw%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B48.376426968484736%252C51.623573031515264%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cly6jvigl00022v6ncnvuonxl%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cly6jvigk00012v6nx7cnsat8%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252Fsrc%252Findex.tsx%2522%257D%255D%252C%2522id%2522%253A%2522cly6jvigl00022v6ncnvuonxl%2522%252C%2522activeTabId%2522%253A%2522cly6jvigk00012v6nx7cnsat8%2522%257D%252C%2522cly6jvigl00052v6nnguozdfw%2522%253A%257B%2522id%2522%253A%2522cly6jvigl00052v6nnguozdfw%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A2222%252C%2522id%2522%253A%2522cly6jvwq300692v6nsujq3q08%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cly6jvwq300692v6nsujq3q08%2522%257D%252C%2522cly6jvigl00042v6n8x2dswdb%2522%253A%257B%2522id%2522%253A%2522cly6jvigl00042v6n8x2dswdb%2522%252C%2522activeTabId%2522%253A%2522cly6jwaz6008a2v6nqo3pnq6q%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cly6jvigl00032v6n6y6b5acw%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522cly6jvj13000idlk06l5laelm%2522%257D%252C%257B%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522id%2522%253A%2522cly6jwaz6008a2v6nqo3pnq6q%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Bug report

When using the VictoryLine component with labels inside a VictoryZoomContainer, the labels are not hidden or clipped properly when zooming, causing them to remain visible outside the intended area.

Steps to reproduce

Select a range in the below chart, then, start scrolling horizontally and see how the labels are not hidden even though they are supposed to. 

If the code sandbox is not working, go to https://commerce.nearform.com/open-source/victory/guides/brush-and-zoom

and in the first victoryLine component add the following...

labels={({ datum }) => `${datum.y}`}
labelComponent={<VictoryLabel renderInPortal dy={-20} />}

You will clearly see the issue

Expected behavior

Labels should be hidden.

Actual behavior

Labels are not hidden

Environment

- Device: any
- OS: any
- Browser: at least in chrome

[YeyoM]

[acharyakavita]

@YeyoM As a workaround , you can try removing renderInPortal flag from the labelComponent which will fix the issue .

[acharyakavita]

@YeyoM

This code works as intended. I tried to fix this issue with a code change but it breaks an existing functionality where it is required to display some elements like tooltips outside the container or overlapping on the container. So we will not be making any code changes.

Workaround for your scenario

1. Not using the renderInPortal flag
2. constrain the width of the containing html element (naked div element)