https://github.com/jesperlekland/react-native-svg-charts-examples

A collection of usage examples of react-native-svg-charts
https://github.com/jesperlekland/react-native-svg-charts-examples

charts d3 react-native react-native-charts react-native-d3 react-native-svg svg

Last synced: 4 days ago
JSON representation

A collection of usage examples of react-native-svg-charts

• Host: GitHub
• URL: https://github.com/jesperlekland/react-native-svg-charts-examples
• Owner: JesperLekland
• Created: 2018-02-04T17:55:14.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:20:30.000Z (almost 2 years ago)
• Last Synced: 2024-10-05T10:58:54.803Z (about 1 month ago)
• Topics: charts, d3, react-native, react-native-charts, react-native-d3, react-native-svg, svg
• Language: JavaScript
• Size: 2.77 MB
• Stars: 359
• Watchers: 7
• Forks: 146
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-native-svg-charts-examples

This repository is meant to serve as a showcase for [`react-native-svg-charts`](https://github.com/JesperLekland/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](#areachart)

* [StackedAreaChart](#stackedareachart)

* [Bar](#bar)

* [Line](#linechart)

* [ProgressCircle](#progresscircle)

* [PieChart](#piechart)

## AreaChart

[](./storybook/stories/area-chart/with-line.js)

[](./storybook/stories/grid-min-max.js)

[](./storybook/stories/area-chart/with-gradient.js)

[](./storybook/stories/partial-chart/area-chart.js)

[](./storybook/stories/layered-charts.js)

[](./storybook/stories/x-axis/scale-time.js)

## BarChart

[](./storybook/stories/bar-chart/with-multiple-data-sets.js)

[](./storybook/stories/bar-chart/with-gradient.js)

[](./storybook/stories/bar-chart/with-different-bars.js)

[](./storybook/stories/bar-chart/horizontal.js)

[](./storybook/stories/bar-chart/horizontal-with-axis.js)

[](./storybook/stories/bar-chart/horizontal-with-labels.js)

[](./storybook/stories/bar-chart/vertical-with-labels.js)

[](./storybook/stories/x-axis/scale-band.js)

## LineChart

[](./storybook/stories/line-chart/with-shadow.js)

[](./storybook/stories/line-chart/with-gradient.js)

[](./storybook/stories/partial-chart/line-chart.js)

[](./storybook/stories/custom-grid.js)

[](./storybook/stories/extras.js)

[](./storybook/stories/both-axes.js)

[](./storybook/stories/decorator.js)

[](./storybook/stories/line-chart/multi-line.js)

## StackedAreaChart

[](./storybook/stories/area-stack/with-y-axis.js)

## ProgressCircle

[](./storybook/stories/progress-gauge/index.js)

## PieChart

[](./storybook/stories/pie-chart/with-labels.js)

[](./storybook/stories/pie-chart/with-different-arcs.js)

[](./storybook/stories/pie-chart/with-centered-labels.js)

[](./storybook/stories/pie-chart/with-image-labels.js)

[](./storybook/stories/pie-chart/with-dynamic-slices.js)

## InteractiveChart

[](./storybook/stories/interactive-chart/index.js)

## License

[MIT](./LICENSE)