1 | # React Google Charts
|
2 |
|
3 | <img align="right" alt="Logo" src="website/static/img/logo.png">
|
4 |
|
5 | A thin, typed, React wrapper for [Google Charts](https://developers.google.com/chart/interactive/docs/reference).
|
6 |
|
7 | [![version](https://img.shields.io/npm/v/react-google-charts.svg)](https://www.npmjs.com/package/react-google-charts)
|
8 | [![downloads](https://img.shields.io/npm/dm/react-google-charts.svg)](https://www.npmjs.com/package/react-google-charts)
|
9 | [![license](https://shields.io/badge/license-MIT-green)](http://opensource.org/licenses/MIT)
|
10 | [![bundle size](https://img.shields.io/bundlephobia/minzip/react-google-charts.svg)](https://bundlephobia.com/result?p=react-google-charts)
|
11 |
|
12 | <br />
|
13 | <a href="#quickstart">Quickstart</a>
|
14 | <span> • </span>
|
15 | <a href="#docs">Docs</a>
|
16 | <span> • </span>
|
17 | <a href="#contributing">Contributing</a>
|
18 | <span> • </span>
|
19 | <a href="https://stackoverflow.com/questions/tagged/react-google-charts">Stack Overflow</a>
|
20 | <br />
|
21 | <hr />
|
22 |
|
23 | ## Quickstart
|
24 |
|
25 | Install this library with your favorite package manager:
|
26 |
|
27 | ```bash
|
28 | yarn add react-google-charts
|
29 | ```
|
30 |
|
31 | or
|
32 |
|
33 | ```bash
|
34 | npm install --save react-google-charts
|
35 | ```
|
36 |
|
37 | Then, import and use it:
|
38 |
|
39 | ```jsx
|
40 | import { Chart } from "react-google-charts";
|
41 |
|
42 | <Chart
|
43 | chartType="ScatterChart"
|
44 | data={[["Age", "Weight"], [4, 5.5], [8, 12]]}
|
45 | width="100%"
|
46 | height="400px"
|
47 | legendToggle
|
48 | />
|
49 | ```
|
50 |
|
51 | # Docs
|
52 |
|
53 | - [Quick Walkthrough](https://react-google-charts.com/docs/quick-walkthrough)
|
54 | - [Components](https://react-google-charts.com/components)
|
55 | - [Examples](https://react-google-charts.com/examples)
|
56 |
|
57 | ## Contributing
|
58 |
|
59 | Contributions are very welcome. Check out [CONTRIBUTING.md](CONTRIBUTING.md)
|
60 |
|
61 | ## Run the Storybook
|
62 |
|
63 | ```bash
|
64 | git clone https://www.github.com/rakannimer/react-google-charts
|
65 | cd react-google-charts
|
66 | yarn
|
67 | yarn start:storybook
|
68 | ```
|