|
1 | | -[](https://travis-ci.org/jerairrest/react-chartjs-2) |
2 | | -[](https://www.npmjs.com/package/react-chartjs-2) |
3 | | -[](https://npm-stat.com/charts.html?package=react-chartjs-2&from=2016-01-01) |
4 | | -[](http://opensource.org/licenses/MIT) |
5 | | - |
6 | | -# react-chartjs-2 |
7 | | - |
8 | | -React wrapper for [Chart.js](http://www.chartjs.org/docs/#getting-started) |
9 | | - |
10 | | -## Getting started |
11 | | - |
12 | | -### Install library with peer dependencies |
| 1 | +<div align="center"> |
| 2 | + |
| 3 | +<h1>React components for <a href="https://www.chartjs.org">Chart.js</a> 📊📈</h1> |
| 4 | + |
| 5 | +Simple yet flexible charts for your React app |
| 6 | + |
| 7 | +[](https://www.npmjs.com/package/react-chartjs-2) |
| 8 | +[](https://www.npmjs.com/package/react-chartjs-2) |
| 9 | +[](http://opensource.org/licenses/MIT) |
| 10 | + |
| 11 | +<br /> |
| 12 | +<a href="#quickstart">Quickstart</a> |
| 13 | +<span> • </span> |
| 14 | +<a href="#examples">Examples</a> |
| 15 | +<span> • </span> |
| 16 | +<a href="https://slack.cube.dev/?ref=eco-react-chartjs">Slack</a> |
| 17 | +<br /> |
| 18 | +<hr /> |
| 19 | +</div> |
| 20 | + |
| 21 | +## Quickstart |
| 22 | + |
| 23 | +Install this library with peer dependencies: |
13 | 24 |
|
14 | 25 | ```bash |
15 | 26 | npm install --save react-chartjs-2 chart.js |
16 | | - |
17 | | -# or |
18 | | - |
19 | | -yarn add react-chartjs-2 chart.js |
20 | 27 | ``` |
21 | 28 |
|
22 | | -###### We recommend using `chart.js ^3.0.0` |
| 29 | +We recommend using `chart.js@^3.0.0`. |
23 | 30 |
|
24 | | -### Usage |
| 31 | +Then, import and use individual components: |
25 | 32 |
|
26 | 33 | ```jsx |
27 | 34 | import { Doughnut } from 'react-chartjs-2'; |
28 | 35 |
|
29 | 36 | <Doughnut data={...} /> |
30 | 37 | ``` |
31 | 38 |
|
32 | | -## Examples |
| 39 | +Need an API to fetch data? Consider [Cube](https://cube.dev/?ref=eco-react-chartjs), an open-source API for data apps. |
33 | 40 |
|
34 | | -Live: [reactchartjs.github.io/react-chartjs-2](https://reactchartjs.github.io/react-chartjs-2/#/) |
| 41 | +## Examples |
35 | 42 |
|
36 | | -See [these examples](example) for more information |
| 43 | +Please see [live examples](https://reactchartjs.github.io/react-chartjs-2/) or their [source code](example). |
37 | 44 |
|
38 | 45 | ## Configure |
39 | 46 |
|
|
0 commit comments