Skip to main content

React Google Charts

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

Quickstart​

Install this library with your favorite package manager:

npm install --save react-google-charts

Then, import the Chart component and pass your data to it.

import { Chart } from "react-google-charts";
function MyChart(props) {
  return (
    <Chart
      // Try different chart types by changing this property with one of: LineChart, BarChart, AreaChart...
      chartType="ScatterChart"
      data={[
        ["Age", "Weight"],
        [4, 16],
        [8, 25],
        [12, 40],
        [16, 55],
        [20, 70],
      ]}
      options={{
        title: "Average Weight by Age",
      }}
      legendToggle
    />
  );
}

Examples​

Browse through our large list of live editable examples or check out the 1 minute quick walkthrough.

Getting Help​

Need help? Ask your question on Stack Overflow.

If you've encountered an issue, please file it on GitHub.