React Google Charts

A thin, typed, React wrapper for Google Charts.

Docs and examples.

• React Google Charts
  • Docs and examples.
  • Installation
  • Quick Start
  • Quick Walkthrough
    • Initialize from data array
    • Initialize using rows and columns
    • Listen to chart events
  • Examples
    • Load Data
      • Load Data From SpreadSheet
    • Charts
      • Area Chart
      • Bar Chart
      • Bubble Chart
      • Calendar Chart
      • Candlestick Chart
      • Column Chart
      • Diff Scatter Chart
      • Diff Column Chart
      • Donut Chart
      • Gantt Chart
      • Gauge Chart
      • Geo Chart
      • Histogram Chart
      • Line Chart
      • Material Bar Chart
      • Material Line Chart
      • Org Chart
      • Pie Chart
      • Sankey Chart
      • Scatter Chart
      • Stepped Area Chart
      • Table Chart
      • Timeline Chart
      • Treemap Chart
      • Waterfall Chart
      • Wordtree Chart
    • Run the example app
  • Contributing

Installation

With your favorite package manager (yarn, pnpm or npm) :

yarn add react-google-charts
# or
npm i -s react-google-charts

Note : If you're using react < 16.3 then use 2.x version:

yarn add react-google-charts@2

Quick Start

import * as React from "react";
import { render } from "react-dom";
import { Chart } from "react-google-charts";

export default class App extends React.Component {
  render() {
    return (
      <div className={"my-pretty-chart-container"}>
        <Chart
          chartType="ScatterChart"
          data={[["Age", "Weight"], [4, 5.5], [8, 12]]}
          width="100%"
          height="400px"
          legendToggle
        />
      </div>
    );
  }
}
render(<App />, document.querySelector("#app"));

Quick Walkthrough

Initialize from data array

import { Chart } from "react-google-charts";
import * as React from "react";
import { render } from "react-dom";

const options = {
  title: "Age vs. Weight comparison",
  hAxis: { title: "Age", viewWindow: { min: 0, max: 15 } },
  vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
  legend: "none"
};
const data = [
  ["Age", "Weight"],
  [8, 12],
  [4, 5.5],
  [11, 14],
  [4, 5],
  [3, 3.5],
  [6.5, 7]
];

const ExampleChart = () => {
  return (
    <Chart
      chartType="ScatterChart"
      data={data}
      options={options}
      width="80%"
      height="400px"
      legendToggle
    />
  );
};

render(<ExampleChart />, document.getElementByID("app"));

Initialize using rows and columns

import * as React from "react";
import { Chart } from "react-google-charts";

const ExampleChart = () => {
  return (
    <Chart
      chartType="ScatterChart"
      rows={[[8, 12], [4, 5.5], [11, 14], [4, 5], [3, 3.5], [6.5, 7]]}
      columns={[
        {
          type: "number",
          label: "Age"
        },
        {
          type: "number",
          label: "Weight"
        }
      ]}
      options={
        // Chart options
        {
          title: "Age vs. Weight comparison",
          hAxis: {
            title: "Age",
            viewWindow: { min: 0, max: 15 }
          },
          vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
          legend: "none"
        }
      }
      width={"100%"}
      height={"400px"}
      legendToggle
    />
  );
};
export default ExampleChart;

Listen to chart events

Set the chart-specific events you want to listen to and the corresponding callback. The callback has the component as an argument.

import * as React from "react";
import { Chart } from "react-google-charts";

const chartEvents = [
  {
    eventName: "select",
    callback({ chartWrapper }) {
      console.log("Selected ", chartWrapper.getChart().getSelection());
    }
  }
];
const data = [
  ["age", "weight"],
  [8, 12],
  [4, 5.5],
  [11, 14],
  [4, 5],
  [3, 3.5],
  [6.5, 7]
];

const options = {
  title: "Age vs. Weight comparison",
  hAxis: { title: "Age", viewWindow: { min: 0, max: 15 } },
  vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
  legend: "none"
};
const ExampleChart = () => {
  return (
    <Chart
      chartType="ScatterChart"
      data={data}
      options={options}
      graphID="ScatterChart"
      width="100%"
      height="400px"
      chartEvents={chartEvents}
    />
  );
};

export default ExampleChart;

Examples

Load Data

Load Data From SpreadSheet

• Demo

Charts

Area Chart

• Demo
• Sandbox
• Raw Code

Bar Chart

• Demo
• Code
• Sandbox

Bubble Chart

• Demo
• Code
• Sandbox

Calendar Chart

• Demo
• Code
• Sandbox

Candlestick Chart

• Demo
• Code
• Sandbox

Column Chart

• Code
• Sandbox

Diff Scatter Chart

• Demo
• Code
• Sandbox

Diff Column Chart

• Demo
• Code
• Sandbox

Donut Chart

• Code
• Sandbox

Gantt Chart

• Demo
• Code
• Sandbox

Gauge Chart

• Demo
• Code
• Sandbox

Geo Chart

• Demo
• Code
• Sandbox

Histogram Chart

• Demo
• Code
• Sandbox

Line Chart

• Demo
• Code
• Sandbox

Material Bar Chart

• Demo
• Code
• Sandbox

Material Line Chart

• Demo
• Code
• Sandbox

Org Chart

• Demo
• Code
• Sandbox

Pie Chart

• Demo
• Code
• Sandbox

Sankey Chart

• Demo
• Code
• Sandbox

Scatter Chart

• Demo
• Code
• Sandbox

Stepped Area Chart

• Demo
• Code
• Sandbox

Table Chart

• Demo
• Code
• Sandbox

Timeline Chart

• Demo
• Code
• Sandbox

Treemap Chart

• Demo
• Code
• Sandbox

Waterfall Chart

• Code
• Sandbox

Wordtree Chart

• Demo
• Code
• Sandbox

Run the example app

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

Contributing

Contributions are very welcome. Check out CONTRIBUTING.md

• Demo