react-google-charts
A React JS wrapper to make it easy and fun to work with Google Charts.
Installation
yarn add react-google-charts
or
npm i -s react-google-charts
or from unpkg.com using html script tag :
and you can then use it using ReactGoogleCharts.default.Chart
Quick Start
;;; Component { return <div className='my-pretty-chart-container'> <Chart chartType="ScatterChart" data='Age' 'Weight' 8 12 4 55 options={} graph_id="ScatterChart" width="100%" height="400px" legend_toggle /> </div> ; };
Quick Walkthrough
Initialize from data array :
;; Component { superprops; thisstate = 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 55 11 14 4 5 3 35 65 7 ; } { return <Chart chartType="ScatterChart" data=thisstatedata options=thisstateoptions graph_id="ScatterChart" width="100%" height="400px" legend_toggle /> ; };
Initialize using rows and columns :
;; Component { superprops; thisstate = 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 55 11 14 4 5 3 35 65 7 columns: type: 'number' label: 'Age' type: 'number' label: 'Weight' ; } { return <Chart chartType="ScatterChart" rows=thisstaterows columns=thisstatecolumns options=thisstateoptions graph_id="ScatterChart" width='100%' height='400px' legend_toggle /> ; };
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.
;; Component { superprops; thischartEvents = eventName: 'select' { // Returns Chart so you can access props and the ChartWrapper object from chart.wrapper console; } ; thisstate = 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 55 11 14 4 5 3 35 65 7 columns: type: 'number' label: 'Age' type: 'number' label: 'Weight' ; } { return <Chart chartType="ScatterChart" rows=thisstaterows columns=thisstatecolumns options=thisstateoptions graph_id="ScatterChart" width="100%" height="400px" chartEvents=thischartEvents /> ; };
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-chartscd react-google-charts/demonpm link ../npm installnpm 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