Popularity
5.3
Growing
Activity
5.2
-
629
20
168

Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: UI Components     Chart     React     Charts     Google    
Latest version: v3.0.6

react-google-charts alternatives and similar libraries

Based on the "Chart" category

Do you think we are missing an alternative of react-google-charts or a related project?

Add another 'Chart' Library

README

React Google Charts

CircleCI NPM NPM NPM BundlePhobia

A thin, typed, React wrapper for Google Charts.

Docs and examples.

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

Charts

Area Chart

  • Demo
  • Sandbox
  • [Raw Code](./sandboxes/area-chart/index.js)

Bar Chart

Bubble Chart

Calendar Chart

Candlestick Chart

  • Demo
  • [Code](./sandboxes/candlestick/index.js)
  • Sandbox

Column Chart

  • [Code](./sandboxes/column-chart/index.js)
  • Sandbox

Diff Scatter Chart

  • Demo
  • [Code](./sandboxes/diff-scatter-chart/index.js)
  • Sandbox

Diff Column Chart

  • Demo
  • [Code](./sandboxes/diff-column-chart/index.js)
  • Sandbox

Donut Chart

  • [Code](./sandboxes/donut-chart/index.js)
  • Sandbox

Gantt Chart

  • Demo
  • [Code](./sandboxes/gantt-chart/index.js)
  • Sandbox

Gauge Chart

Geo Chart

Histogram Chart

Line Chart

Material Bar Chart

  • Demo
  • [Code](./sandboxes/material-bar-chart/index.js)
  • Sandbox

Material Line Chart

  • Demo
  • [Code](./sandboxes/material-line-chart/index.js)
  • Sandbox

Org Chart

Pie Chart

Sankey Chart

Scatter Chart

  • Demo
  • [Code](./sandboxes/scatter-chart/index.js)
  • Sandbox

Stepped Area Chart

  • Demo
  • [Code](./sandboxes/stepped-area-chart/index.js)
  • Sandbox

Table Chart

Timeline Chart

Treemap Chart

Waterfall Chart

  • [Code](./sandboxes/waterfall/index.js)
  • Sandbox

Wordtree Chart

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](CONTRIBUTING.md)


*Note that all licence references and agreements mentioned in the react-google-charts README section above are relevant to that project's source code only.