Victory: Horizontal scroll

[carlosgg93]

It's posible to do horizontall scroll in a victory chart with victory bars?

ex: if I have 100 victory bars and only i want show 25, the rest will be hidden and when you will do horizontall scroll shows the others victory bars

[boygirl]

@carlosgg93 yes, you can use VictoryZoomContainer for this. You would set allowZoom={false} so that the chart would only pan. Then set an initial zoomDomain prop so that only your initial 25 bars are included. You can read more about VictoryZoomContainer here https://formidable.com/open-source/victory/docs/victory-zoom-container

[carlosgg93]

@boygirl Thanks!!

[rishabhbhatia]

@carlosgg93 @boygirl Could someone share a minimal example. I have it working on iOS but for some reason the scroll won't work on android devices. My chart code is below.

           <VictoryChart
              domainPadding={40}
              containerComponent={
                <VictoryZoomContainer
                  allowZoom={false}
                  zoomDomain={{x: [moment().startOf('week').subtract(6, 'hours').toDate(), moment().endOf('week').add(6, 'hours').toDate()]}}
                />
              }
            >
              <VictoryAxis
                tickFormat={(x) => (moment(x).format('Do'))}
              />
              <VictoryAxis dependentAxis
                tickFormat={(y) => (`$${y}`)}
              />
              <VictoryBar
                x="bookingTime"
                y="tripAmt"
                data={earnings}
                labels={(d) => (`$${d.y}`)}
                alignment="middle"
              />
            </VictoryChart>

[ShaikhKabeer]

The scrolling is too slow for Horizontal Bar Chart. Any solution for this @boygirl

[ShaikhKabeer]

Any update on this ?

[hntddt123]

Any update for onPanDomainHandler?

[Mohini1693]

@boygirl - Any update on this? Moreover, can I link the VictoryZoomContainer scrolling with a horizontal scrollbar (so that application users know about the scrolling feature)?