Today I was integrating Google Chart into a React app, and I find a library which is very cool so I thought I should share my experience with you. React Chart Integration is very easy to implement. I am sure after completing react chart integration tutorial, you will love this package too! So let’s get started with React Chart Integration
Create React App
Before get started react charts integration in your React Application, We need a React Project. If you don’t know how to create a new project. Follow this tutorial.
Step 1 – Install the Package
Run the below command will install the react-google-charts package
npm i react-google-charts
Step 2 – Import the Package
Add below line at the top of your component
import { Chart } from "react-google-charts";
Step 3 – Add HTML Markup
render() {
return (
<div className="row mt-5">
<div className="col-md-12">
<h2 className="text-left">Google Chart Demo</h2>
<div className="card mt-3">
<div className="card-body">
<Chart
height={'500px'}
chartType="Bar"
loader={<div>Loading First Chart</div>}
data={[
['Year', 'Sales', 'Expenses', 'Profit'],
['2014', 1000, 400, 200],
['2015', 1170, 460, 250],
['2016', 660, 1120, 300],
['2017', 1030, 540, 350],
['2018', 1030, 540, 350],
['2019', 930, 490, 260],
]}
options={{
// Material design options
chart: {
title: 'Company Performance',
subtitle: 'Sales, Expenses, and Profit: 2014-2017',
},
}}
// For tests
rootProps={{ 'data-testid': '2' }}
/>
</div>
</div>
<div className="card mt-3">
<div className="card-body">
<Chart
height={'500px'}
chartType="Bar"
loader={<div>Loading Second Chart</div>}
spreadSheetUrl="https://docs.google.com/spreadsheets/d/1XWJLkAwch5GXAt_7zOFDcg8Wm8Xv29_8PWuuW15qmAE"
spreadSheetQueryParameters={{
headers: 1,
query: 'SELECT A, H, O, Q, R, U LIMIT 6 OFFSET 8',
}}
options={{
vAxis: {
format: 'long',
title: 'Stigler Diet',
},
chart: {
title: 'Stigler Diet',
subtitle: 'Stigler Diet subtitle',
}
}}
rootProps={{ 'data-testid': '2' }}
/>
</div>
</div>
</div>
</div>
);
}
This will draw two chart.
First chart will get the data from the data property and second graph will get the data from the google sheet
For more information visit this document
Running the App
Run application using npm start. Congrats!! See, it was easy.
Preview
