I'd like to use this segmented control library to change the axis of the victory-native bar charts library. In this case, I want to use useState
to change the value of the state and make it so that everytime the user picks an option on the segmented control, the axis changes corresponding to what the user picked. How can I use setValue
to update the render when the axis changes? The end result should look somewhat like this: https://formidable.com/open-source/victory/docs/common-props/
DataScreen.tsx
<SegmentedControl style={styles.control} values={["D", "W", "M", "Y"]} selectedIndex={2} onChange={(event) => { useState(//???); }} /><Graph />
Graph.tsx
function Graph(props) { const [value, setValue] = useState([]); return (<View style={styles.container}><VictoryChart width={400} theme={VictoryTheme.material}><VictoryAxis tickFormat={value} /><VictoryBar alignment="start" cornerRadius={{ top: 3 }} style={{ data: { fill: "orange", width: 25 } }} animate={{ duration: 1000, onLoad: { duration: 1000 }, }} data={[ { x: "Sun", y: countyCases }, { x: "Mon", y: 25 }, { x: "Tue", y: 40 }, { x: "Wed", y: 50 }, { x: "Thu", y: 50 }, { x: "Fri", y: 50 }, { x: "Sat", y: 50 }, ]} /></VictoryChart></View> );}function Week() { return (<VictoryAxis tickValues={["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]} /> );}const Month = () => {<VictoryAxis tickValues={[4, 11, 18, 25, 2]} />;};const Year = () => {<VictoryAxis tickValues={["J", "F", "M", "A", "M", "J", "J", "A", "S", "O", "N", "D"]} />;};