Home

Awesome

React Google Charts

<img align="right" alt="Logo" src="https://www.react-google-charts.com/img/logo-v2.svg">

React Google Charts is a lightweight and fully typed React wrapper for Google Charts.

It's easy to use, supports over 25 chart types, supports animations and is highly customizable when needed.

version downloads license bundle size TypeScript

<br /> <a href="https://www.react-google-charts.com/">Docs</a> <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span> <a href="https://www.react-google-charts.com/docs/quick-walkthrough">Quickstart</a> <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span> <a href="https://www.react-google-charts.com/examples">Examples</a> <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span> <a href="#contributing">Contributing</a> <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span> <a href="https://stackoverflow.com/questions/tagged/react-google-charts">Stack Overflow</a> <span>&nbsp;&nbsp;•&nbsp;&nbsp;</span> <a href="https://discord.gg/nNa2EEgUkS">Discord</a> <br /> <hr />

Visit Our Website

Quickstart

Install this library with your favorite package manager:

npm i react-google-charts

Then, import and use it:

import { Chart } from "react-google-charts";

<Chart
  chartType="ScatterChart"
  data={[
    ["Age", "Weight"],
    [4, 5.5],
    [8, 12],
  ]}
  width="100%"
  height="400px"
  legendToggle
/>;

Contributing

Contributions are very welcome. Check out CONTRIBUTING.md

Run the Storybook

git clone https://www.github.com/rakannimer/react-google-charts
cd react-google-charts
npm i
npm run start:storybook