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

8 Comments

  1. samochody na sprzedaż said:

    Doskonała robota, którą wykonałeś, ta strona internetowa jest naprawdę fajna i zawiera fantastyczne informacje. https://samocholand.pl/

    January 5, 2021
    Reply
  2. viagra without a prescription said:

    I intended to compose you a bit of note in order to give many thanks again about the amazing advice you’ve contributed above. It’s generous of people like you giving easily all a few individuals could have advertised as an e-book in making some bucks for their own end, and in particular considering that you could have done it if you considered necessary. The advice additionally acted as a easy way to be aware that many people have a similar desire just as mine to figure out a good deal more around this condition. Certainly there are a lot more enjoyable instances ahead for folks who browse through your blog. https://gemerekliler.com/

    January 7, 2021
    Reply
  3. cialis without a prescription said:

    I’m commenting to let you be aware of of the amazing discovery my child developed browsing the blog. She came to find a good number of details, including how it is like to have a great coaching character to get many people quite simply grasp chosen hard to do subject areas. You really exceeded our expectations. Many thanks for giving the insightful, healthy, educational and as well as easy thoughts on the topic to Jane. https://azzaroelectric.com/

    January 7, 2021
    Reply
  4. levitra no rx said:

    I intended to compose you a bit of note in order to give many thanks again considering the awesome basics you’ve contributed above. It’s generous of people like you giving easily all a few individuals could have advertised as an e-book in making some bucks for their own end, certainly considering that you could have done it if you considered necessary. The basics additionally acted as a easy way to be aware that many people have a similar desire just as mine to figure out a great deal more concerning this condition. Certainly there are a lot more enjoyable instances ahead for folks who check out your blog. https://eskaliths.com/

    January 7, 2021
    Reply
  5. bupron without a prescription said:

    I enjoy you because of all of the effort on this blog. Betty delights in carrying out internet research and it’s easy to see why. A lot of people hear all about the compelling form you convey advantageous guidance by means of the blog and attract contribution from other individuals about this area and my child has always been becoming educated a great deal. Enjoy the remaining portion of the new year. You’re carrying out a brilliant job. https://bupronbupropion.com/

    January 8, 2021
    Reply
  6. sinequan cheap said:

    I precisely had to say thanks all over again. I’m not certain the things I could possibly have created in the absence of the actual creative ideas discussed by you concerning such concern. It absolutely was a real depressing concern for me personally, but considering a new professional fashion you handled it forced me to cry for delight. I’m grateful for the assistance and as well , expect you comprehend what a powerful job that you are carrying out educating men and women by way of a web site. I am certain you’ve never come across all of us. https://sinequandoxepin.com/#

    January 9, 2021
    Reply
  7. purchase venlafaxine said:

    Thanks for your own work on this website. My mum take interest in setting aside time for research and it is simple to grasp why. We notice all relating to the powerful way you provide very helpful tips and hints via your website and therefore strongly encourage response from visitors on this subject matter while our own simple princess is without a doubt studying so much. Take pleasure in the rest of the year. Your performing a tremendous job. https://venlorz.com/#

    January 10, 2021
    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *