Created
April 14, 2022 20:03
-
-
Save erickvictor/b2e5bf6e6dc628b77dbdec4d04d6bd0b to your computer and use it in GitHub Desktop.
Example Chart with VictoryJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| VictoryBar, | |
| VictoryChart, | |
| VictoryAxis, | |
| VictoryTheme, | |
| VictoryStack, | |
| VictoryTooltip | |
| } from "victory"; | |
| const data2012 = [ | |
| { quarter: 1, earnings: 13000 }, | |
| { quarter: 2, earnings: 16500 }, | |
| { quarter: 3, earnings: 14250 }, | |
| { quarter: 4, earnings: 19000 }, | |
| ]; | |
| const data2013 = [ | |
| { quarter: 1, earnings: 15000 }, | |
| { quarter: 2, earnings: 12500 }, | |
| { quarter: 3, earnings: 19500 }, | |
| { quarter: 4, earnings: 13000 }, | |
| ]; | |
| const data2014 = [ | |
| { quarter: 1, earnings: 11500 }, | |
| { quarter: 2, earnings: 13250 }, | |
| { quarter: 3, earnings: 20000 }, | |
| { quarter: 4, earnings: 15500 }, | |
| ]; | |
| const data2015 = [ | |
| { quarter: 1, earnings: 18000 }, | |
| { quarter: 2, earnings: 13250 }, | |
| { quarter: 3, earnings: 15000 }, | |
| { quarter: 4, earnings: 12000 }, | |
| ]; | |
| function App() { | |
| return ( | |
| <div style={{ width: '500px' }}> | |
| <h1>Victory Tutorial</h1> | |
| <VictoryChart domainPadding={10} theme={VictoryTheme.material}> | |
| <VictoryAxis | |
| tickValues={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]} | |
| /> | |
| <VictoryAxis dependentAxis tickFormat={(x) => `$${x / 1000}k`} /> | |
| <VictoryStack colorScale={"warm"}> | |
| <VictoryBar labels={({datum}) => `${datum.earnings}`} labelComponent={<VictoryTooltip />} data={data2012} x={"quarter"} y={"earnings"} /> | |
| <VictoryBar labels={({datum}) => `${datum.earnings}`} labelComponent={<VictoryTooltip />} data={data2013} x={"quarter"} y={"earnings"} /> | |
| <VictoryBar labels={({datum}) => `${datum.earnings}`} labelComponent={<VictoryTooltip />} data={data2014} x={"quarter"} y={"earnings"} /> | |
| <VictoryBar labels={({datum}) => `${datum.earnings}`} labelComponent={<VictoryTooltip />} data={data2015} x={"quarter"} y={"earnings"} /> | |
| </VictoryStack> | |
| </VictoryChart> | |
| </div> | |
| ); | |
| } | |
| export default App; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment