React Google Charts
A thin, typed, React wrapper for Google Charts.
Docs and examples.
- React Google Charts
- Docs and examples.
- Installation
- Quick Start
- Quick Walkthrough
- Examples
- Load Data
- Charts
- Area Chart
- Bar Chart
- Bubble Chart
- Calendar Chart
- Candlestick Chart
- Column Chart
- Diff Scatter Chart
- Diff Column Chart
- Donut Chart
- Gantt Chart
- Gauge Chart
- Geo Chart
- Histogram Chart
- Line Chart
- Material Bar Chart
- Material Line Chart
- Org Chart
- Pie Chart
- Sankey Chart
- Scatter Chart
- Stepped Area Chart
- Table Chart
- Timeline Chart
- Treemap Chart
- Waterfall Chart
- Wordtree Chart
- Run the example app
- Contributing
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
;;; Component { return <div className="my-pretty-chart-container"> <Chart chartType="ScatterChart" data="Age" "Weight" 4 55 8 12 width="100%" height="400px" legendToggle /> </div> ; };
Quick Walkthrough
Initialize from data array
;;; 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 55 11 14 4 5 3 35 65 7; const ExampleChart = { return <Chart chartType="ScatterChart" data=data options=options width="80%" height="400px" legendToggle /> ;}; ;
Initialize using rows and columns
;; const ExampleChart = { return <Chart chartType="ScatterChart" rows=8 12 4 55 11 14 4 5 3 35 65 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 /> ;};;
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.
;; const chartEvents = eventName: "select" { console; } ;const data = "age" "weight" 8 12 4 55 11 14 4 5 3 35 65 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 /> ;}; ;
Examples
Load Data
Load Data From SpreadSheet
Charts
Area Chart
Bar Chart
Bubble Chart
Calendar Chart
Candlestick Chart
Column Chart
Diff Scatter Chart
Diff Column Chart
Donut Chart
Gantt Chart
Gauge Chart
Geo Chart
Histogram Chart
Line Chart
Material Bar Chart
Material Line Chart
Org Chart
Pie Chart
Sankey Chart
Scatter Chart
Stepped Area Chart
Table Chart
Timeline Chart
Treemap Chart
Waterfall Chart
Wordtree Chart
Run the example app
git clone https://www.github.com/rakannimer/react-google-chartscd react-google-chartsnpm inpm start
Contributing
Contributions are very welcome. Check out CONTRIBUTING.md