React Js Tutorial- Google Combo Chart Component Example

How To Create React Js Google Combo Chart Component

It is of utmost requirement in every app to have a feature of Chart Integration. It becomes more significant if we want to show the data to the users for business decision making. This tutorial will surely help in implementing the React js Combo Chart Component in your React App even if you are new to this work.

We will use the React Google Charts Plugin for doing the above-mentioned. A combo chart accumulates two-column charts, two-line graphs or line graphs and column charts.

You will see in this tutorial that we will be building a combo chart using a static data set. This chart will render every series as a different marker type; we will see data of monthly coffee production by a country in a more meaningful way.

 

React Js Google Combo Chart Example

We just have to follow the below-given steps:

Step1-Create The New React App

Step 2- Add Bootstrap Library

Step 3-Install The Google Charts Package

Step 4-Implement The Combo Chart

Step 5-Update App Js

Step 6-Start The React App

 

Step 1- Create The React Project

The first step is very basic in which we will create the new React App by using create react app:

npx create-react-app react-blog

Next, we move inside the project:

cd react-blog

 

Step 2- Install The Bootstrap Library

Here, we will install the Bootstrap Package by executing the following command and installing this open-source CSS Framework:

npm install bootstrap

Afterward, we have to add the Bootstrap into the App.js file:

import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

 

Step 3- Add Google Charts Package

Now, we go to console and type the official command to add the React Google Charts Package:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Implement The Combo Chart

Let’s now create the components/ folder and the GoogleChart.js file into it:

For embedding the combo chart and display data, we will copy and paste the given code into the GoogleChart.js component file:

import React, { Component } from "react";
import Chart from "react-google-charts";

const data = [
  [
    'Month',
    'Bolivia',
    'Ecuador',
    'Madagascar',
    'Papua New Guinea',
    'Rwanda',
    'Average',
  ],
  ['2004/05', 165, 938, 522, 998, 450, 614.6],
  ['2005/06', 135, 1120, 599, 1268, 288, 682],
  ['2006/07', 157, 1167, 587, 807, 397, 623],
  ['2007/08', 139, 1110, 615, 968, 215, 609.4],
  ['2008/09', 136, 691, 629, 1026, 366, 569.6],
];

class GoogleChart extends Component {
  
  constructor(props) {
    super(props)
  }

  render() {
      return (
          <div className="container mt-5">
              <h2>React Combo Chart Example</h2>

              <Chart
                width={'600px'}
                height={'350px'}
                chartType="ComboChart"
                loader={<div>Loading Chart</div>}
                data={data}
                options={{
                  title: 'Monthly Coffee Production by Country',
                  vAxis: { title: 'Cups' },
                  hAxis: { title: 'Month' },
                  seriesType: 'bars',
                  series: { 5: { type: 'line' } },
                }}
                rootProps={{ 'data-testid': '1' }}
              />                         
          </div>                  
      )
  }
}

export default GoogleChart;

 

Step 5- Update App Js

In this step, we have to add the GoogleChart.js file into the main App.js component file:

import React from 'react';

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleChart from './components/GoogleChart';


function App() { 
  return (
    <div className="App">
      <GoogleChart />
    </div>
  );
}

export default App;

 

Step 6- Run The React App

Now, we reach the last step of this guide in which we will check the progress by starting the React app server:

npm start

 

Conclusion

So, you see how easy and smooth it is to implement a stack of charts in the React app for displaying the data. Hope you have found this tutorial quite useful for your next React app.

Thanks

 

Leave a Reply

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