React chart integration with live demo

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