Back to Gallery
Victory Area Animation
function App() { const [state, setState] = React.useState({ data: getData() }); React.useState(() => { const setStateInterval = window.setInterval(() => { setState({ data: getData() }); }, 4000); return () => { window.clearInterval(setStateInterval); } }, []); return ( <VictoryChart theme={VictoryTheme.material} animate={{ duration: 1000 }} > <VictoryStack colorScale={"blue"} > {state.data.map((data, i) => { return ( <VictoryArea key={i} data={data} interpolation={"basis"} /> ); })} </VictoryStack> </VictoryChart> ); } function getData() { return _.range(7).map(() => { return [ { x: 1, y: _.random(1, 5) }, { x: 2, y: _.random(1, 10) }, { x: 3, y: _.random(2, 10) }, { x: 4, y: _.random(2, 10) }, { x: 5, y: _.random(2, 15) } ]; }); } render(<App/>);