Awesome
react-native-svg-charts-examples
This repository is meant to serve as a showcase for react-native-svg-charts
.
Here we try to gather all the coolest implementations and use cases to serve as inspiration for other people. Open Source is all about sharing knowledge!
Have you ever made a cool graph using react-native-svg-charts
, maybe a super complex use case or just really pretty design?
Make a PR with your code and include it here for everyone to see.
Have a separate repo with some awesome examples? Make a PR and just include the link to your repo in this README, We'd rather have too many cool examples!
Just make sure that all examples are fully reproducible demos so that people don't have to figure a bunch of stuff out on the own.
Click an example to see the code! 💪
Examples
AreaChart
<img src="./screenshots/area-chart.png" width=33% /> <img src="./screenshots/grid-min-max.png" width=33% /> <img src="./screenshots/gradient.png" width=33% /> <img src="./screenshots/partial-chart-area.png" width=33% /> <img src="./screenshots/layered-charts.png" width=33% /> <img src="./screenshots/scale-time.png" width=33% />
BarChart
<img src="./screenshots/bar-chart-grouped.png" width=33% /> <img src="./screenshots/bar-chart-gradient.png" width=33% /> <img src="./screenshots/bar-chart-with-different-bars.png" width=33% /> <img src="./screenshots/bar-chart-horizontal.png" width=33% /> <img src="./screenshots/bar-chart-horizontal-with-axis.png" width=33% /> <img src="./screenshots/bar-chart-horizontal-with-labels.png" width=33% /> <img src="./screenshots/bar-chart-vertical-with-labels.png" width=33% /> <img src="./screenshots/scale-band.png" width=33% />
LineChart
<img src="./screenshots/line-chart.png" width=33% /> <img src="./screenshots/gradient-line.png" width=33% /> <img src="./screenshots/partial-chart-line.png" width=33% /> <img src="./screenshots/custom-grid.png" width=33% /> <img src="./screenshots/extras.png" width=33% /> <img src="./screenshots/both-axes.png" width=33% /> <img src="./screenshots/decorators.png" width=33% /> <img src="./screenshots/multi-line.png" width=33% />
StackedAreaChart
<img src="./screenshots/area-stack-with-y-axis.png" width=33% />
ProgressCircle
<img src="./screenshots/progress-gauge.png" width=33% />
PieChart
<img src="./screenshots/pie-chart-with-labels.png" width=33% /> <img src="./screenshots/pie-with-different-arcs.png" width=33% /> <img src="./screenshots/pie-with-centered-labels.png" width=33% /> <img src="./screenshots/pie-with-image-labels.png" width=33% /> <img src="./screenshots/pie-chart-with-dynamic-slices.png" width=33% />
InteractiveChart
<img src="./screenshots/interactive-chart.gif" width=33% />