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

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

and use it:

Live Editor
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],
      ]}
      height="400px"
      options={{
        hAxis: {
          maxValue: 22,
          title: "Age (Years)",
        },
        vAxis: {
          maxValue: 90,
          title: "Weight (kg)",
        },
        title: "Average Weight by Age",
      }}
      legendToggle
    />
  );
}
Result
Loading...

You can also use the material design versions available for Bar Charts and Line Charts

Live Editor
function App() {
  const data = [
    ["Year", "Sales", "Expenses", "Profit"],
    ["2014", 1000, 400, 200],
    ["2015", 1170, 460, 250],
    ["2016", 660, 1120, 300],
    ["2017", 1030, 540, 350],
  ];
  const options = {
    chart: {
      title: "Company Performance",
      subtitle: "Sales, Expenses, and Profit: 2014-2017",
    },
  };
  return (
    <Chart
      chartType="Bar"
      width="100%"
      height="400px"
      data={data}
      options={options}
    />
  );
}
Result
Loading...

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.