typescriptreact-nativevictory-chartsvictory-native

How to make Victory Native chart have more natural scrolling


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> 
  )

Chart


Solution

  • 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>