react-google-charts

A React JS wrapper to make it easy and fun to work with Google Charts.

Installation

yarn add react-google-charts

npm i -s react-google-charts

or from unpkg.com using html script tag :

 <script src="https://unpkg.com/[email protected]/umd/react-google-charts.min.js" />

and you can then use it using ReactGoogleCharts.default.Chart

JSFiddle example

Quick Start

import 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'], [8, 12], [4, 5.5]]}
        options={{}}
        graph_id="ScatterChart"
        width="100%"
        height="400px"
        legend_toggle
       />
    </div>
    )
  }
}
render(<App/>, document.querySelector('#app'));

Quick Walkthrough

Initialize from data array :

import {Chart} from 'react-google-charts';
import React from 'react'

class ExampleChart extends React.Component {
  constructor(props){
    super(props);
    this.state={
      options:{
         	title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
      },
      data:[
         	['Age', 'Weight'],
         	[ 8,      12],
         	[ 4,      5.5],
         	[ 11,     14],
         	[ 4,      5],
         	[ 3,      3.5],
         	[ 6.5,    7]
      ]
    };
  }
  render() {
    return (
      <Chart
        chartType="ScatterChart"
        data={this.state.data}
        options={this.state.options}
        graph_id="ScatterChart"
        width="100%"
        height="400px"
        legend_toggle
       />
    );
  }
};
export default ExampleChart;

Initialize using rows and columns :

import {Chart} from 'react-google-charts';
import React from 'react'

class ExampleChart extends React.Component {
  constructor(props){
    super(props);
    this.state={
      options: {
         	title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
      },
      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'
      	}
      ]
    }
  }
  render() {
      return (
        <Chart chartType="ScatterChart" rows={this.state.rows} columns={this.state.columns} options={this.state.options} graph_id="ScatterChart"  width={"100%"} height={"400px"}  legend_toggle={true} />
      );
  }
};
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 React from 'react';
import {Chart} from 'react-google-charts';

class ExampleChart extends React.Component {
  constructor(props){
    super(props);
    this.chartEvents=[
      {
        eventName : 'select',
        callback  : function(Chart) {
            // Returns Chart so you can access props and  the ChartWrapper object from chart.wrapper
            console.log("Selected ",Chart.chart.getSelection());
        }
      }
    ];
    this.state={
      options: {
         	title: 'Age vs. Weight comparison',
          hAxis: {title: 'Age', minValue: 0, maxValue: 15},
          vAxis: {title: 'Weight', minValue: 0, maxValue: 15},
          legend: 'none'
      },
      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'
      	}
      ]
    }
  }
  render() {
    return (
      <Chart
        chartType="ScatterChart"
        rows={this.state.rows}
        columns={this.state.columns}
        options={this.state.options}
        graph_id="ScatterChart"
        width="100%"
        height="400px"
        chartEvents={this.chartEvents}
       />
    );
  }
};
export default ExampleChart;

##Isomorphic support

Supports isomorphic configurations out of the box thanks to @voogryk

Examples

Run the example app

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

Run the demo app

Run the demo directory that contains the code powering : http://rakannimer.github.io/react-google-charts/

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

FAQ

Timeline/table chart is not rendering.

Chart loader is a singleton that only loads chartPackages once, and by default it loads the corechart packages. If you need to use packages like timeline or table, add chartPackages prop with value ['corechart', 'timeline'] to your charts.

Changelog

Contributing

Contributions are very welcome. Check out CONTRIBUTING.md

tom-mckinney / react-google-charts Goto Github PK