How to zoom in or out candlestick chart

[vannamphuc]

I'm trying to code the zoom-in/out function for CandleStickChart but don't know how to approach it. Can anyone who has done this function help me with this?

[honeybadger26]

Hi @tomheo11233aA,

One way to achieve this is to change the data that is sent the provider. In this example my original data array has 20 elements and when the button is pressed it is reduced to the first 10 elements and gives the effect of zooming in to that part of the graph:

const [data, setData] = useState([ ... ]); // List of 20 elements

return (
  <>
    <LineChart.Provider data={data}>
      <LineChart>
        <LineChart.Path />
      </LineChart>
    </LineChart.Provider>

    {/* 'Zoom' in to the first half of the chart */}
    <Button onPress={() => setData(data.slice(0, 10))}>Zoom In</Button>

    <Button onPress={() => setData(data)}>Reset</Button>
  </>
);