I have a basic bar graph chart that allows panning. The only problem is there is no momentum scrolling. In other words, when you scroll and release your finger, it stops scrolling immediately, which is not natural. How can I enable this?
const getContainerComponent = () => {
return (
<VictoryZoomContainer
allowZoom={false}
allowPan={true}
zoomDimension="x"
zoomDomain={{x: [props.data.length - 7, props.data.length]}}
minimumZoom={{x: 1}}
clipContainerComponent={<VictoryClipContainer />}
/>
)
}
return (
<VictoryChart
theme={theme}
minDomain={{ y: 0 }}
containerComponent={ getContainerComponent() }
domainPadding={{ x : [10, 10] }}
>
<VictoryAxis
dependentAxis
tickFormat={(t: number) => `${Math.round(t)}`}
crossAxis={false}
/>
<VictoryAxis
tickLabelComponent={ <VictoryLabel dy={10} />}
/>
<VictoryBar
data={arrayOfData}
x="timePeriod"
y="amount"
alignment="middle"
barWidth={25}
cornerRadius={{ top:12, bottom: 12 }}
/>
</VictoryChart>
)
The solution was to put the victoryChart with the x axis in a scroll view. The y axis stays on its own.
Here's how I did it (with some NativeBase Components):
<HStack marginRight={5} >
<Box w="15%" >
<VictoryAxis
dependentAxis
tickFormat={(t: number) => Number.isInteger(t) ? `${Math.round(t)}` : null}
crossAxis={false}
maxDomain={{y: domainMax} }
tickCount={5}
/>
</Box>
<Box w="85%" >
<ScrollView
horizontal
>
<VictoryChart
theme={theme}
minDomain={{ y: 0 }}
padding={{ left: 1, right: 1, top:50, bottom:50 }}
domainPadding={{ x : 17 }}
width={ formattedData.length * (barWidth + betweenBarPadding)}
>
<VictoryAxis
tickLabelComponent={ <VictoryLabel dy={10} />}
/>
<VictoryBar
data={formattedData}
x="timePeriod"
y="amount"
alignment="middle"
barWidth={barWidth}
cornerRadius={{ top:12, bottom: 12 }}
/>
</VictoryChart>
</ScrollView>
</Box>
</HStack>