UNPKG

1.85 kBMarkdownView Raw
1# React Google Charts
2
3<img align="right" alt="Logo" src="website/static/img/logo.png">
4
5A 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>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
15<a href="#docs">Docs</a>
16<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
17<a href="#contributing">Contributing</a>
18<span>&nbsp;&nbsp;•&nbsp;&nbsp;</span>
19<a href="https://stackoverflow.com/questions/tagged/react-google-charts">Stack Overflow</a>
20<br />
21<hr />
22
23## Quickstart
24
25Install this library with your favorite package manager:
26
27```bash
28yarn add react-google-charts
29```
30
31or
32
33```bash
34npm install --save react-google-charts
35```
36
37Then, import and use it:
38
39```jsx
40import { 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
59Contributions are very welcome. Check out [CONTRIBUTING.md](CONTRIBUTING.md)
60
61## Run the Storybook
62
63```bash
64git clone https://www.github.com/rakannimer/react-google-charts
65cd react-google-charts
66yarn
67yarn start:storybook
68```