React Google Charts

A thin wrapper around the Google Charts library.

Installation

yarn add react-google-charts@latest
## OR
npm i --save react-google-charts@latest

Usage

Start by importing one of the 2 react components provided :

import {Chart, ChartRenderer} from 'react-google-charts'

Use cases

I have a bunch of points that I want to render as a pretty graph.

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

const points = [
  {
    { x: "2015", y: 30, label: "AttentionSpan", type: "number" },
    { x: "2016", y: 20, label: "AttentionSpan", type: "number" },
    { x: "2017", y: 10, label: "AttentionSpan", type: "number" },
    { x: "2018", y: 5, label: "AttentionSpan", type: "number" },
    { x: "2019", y: 1, label: "AttentionSpan", type: "number" }
  }
]

const options = {
  width: 400,
  height: 400
}

// Then, in your render method : 

render() {
  return (
    <Chart
      points={points}
      type="ScatterChart"
      options={options}
      onReady={() => {
        console.warn("onReady");
      }}
      onError={() => {
        console.warn("onError");
      }}
      onSelect={selection => {
        console.warn("onSelect " + JSON.stringify(selection, null, 2));
      }}
    />
  );
}

I want to use Google Charts primitives to build complex graphs and/or follow Google Charts docs.

Google Charts offers very powerful primitives to build all kind of charts.

The ChartRenderer loads and gives you access to :

• Google Chart Wrapper

• Google Data Table

• Google Visualization Helper: arrayToDataTable

Typescript typings for these 3 are provided, to try and limit constantly searching the docs.

All Examples

• AnnotationChart
• AreaChart
• BarChart
• BubbleChart
• Calendar
• CandlestickChart
• ColumnChart
• DonutChart
• GanttChart
• GaugeChart
• GeoChart
• Histogram
• LineChart
• OrgChart
• PieChart
• Sankey
• ScatterChart
• SteppedAreaChart
• TableChart
• TreeMap
• WaterfallChart
• WordTree