temporary package as a fix to react-google-charts to add maps apiKey
npm install react-google-charts-with-key
A React JS wrapper to make it easy and fun to work with Google Charts.
``
yarn add react-google-charts
or
`
npm i -s react-google-charts
or from unpkg.com using html script tag :
`html`
and you can then use it using ReactGoogleCharts.default.Chart
`javascript
import React from 'react';
import { render } from 'react-dom';
import { Chart } from 'react-google-charts';
export default class App extends React.Component {
render() {
return (
Quick Walkthrough
$3
javascript
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 (
data={this.state.data}
options={this.state.options}
graph_id="ScatterChart"
width="100%"
height="400px"
legend_toggle
/>
);
}
}
export default ExampleChart;
`$3
javascript
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 (
rows={this.state.rows}
columns={this.state.columns}
options={this.state.options}
graph_id="ScatterChart"
width={'100%'}
height={'400px'}
legend_toggle
/>
);
}
}
export default ExampleChart;
`$3
Set the chart-specific events you want to listen to and the corresponding callback.
The callback has the component as an argument.
javascript
import React from 'react';
import { Chart } from 'react-google-charts';class ExampleChart extends React.Component {
constructor(props) {
super(props);
this.chartEvents = [
{
eventName: 'select',
callback(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 (
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
$3
bash
git clone https://www.github.com/rakannimer/react-google-charts
cd react-google-charts/demo
npm link ../
npm install
npm start
`FAQ
$3
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.Contributions are very welcome. Check out CONTRIBUTING.md