react-google-charts-ts

A thin wrapper around the Google Charts library.

Usage no npm install needed!

<script type="module">
  import reactGoogleChartsTs from 'https://cdn.skypack.dev/react-google-charts-ts';
</script>

README

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 :

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

All Examples