Categories: React Tutorials

How to Create React Js Google Combo Chart Component

React Combo Chart tutorial; Chart integration is a required feature in almost every app, especially when you have to show data to users for business decision making. This guide is going to be helpful for React developers, and if you are a beginner react developer, then this tutorial is for you.

In this tutorial, we will teach you how to create a React js combo chart component using the React Google charts plugin. Ideally, a combo chart accumulates two-column charts, two-line graphs or line graphs and column charts.

We will help you build a combo chart using a static data set. This chart will render every series as a different marker type; we will show you data of monthly coffee production by a county in more meaningful ways.

React Js Google Combo Chart Example

  • Step 1: Create React App
  • Step 2: Add Bootstrap Library
  • Step 3: Install Google Charts Package
  • Step 4: Implement Combo Chart
  • Step 5: Update App Js
  • Step 6: Start React Project

Create React Project

The official create react app tool lets you create the new react app using a single command.

Execute command to install the application.

npx create-react-app react-blog

Lets cd into the project and get inside the project.

cd react-blog

Install Bootstrap Library

We will install the Bootstrap package; let’s execute the following command and install this open-source CSS framework.

npm install bootstrap

Now, bootstrap has to be added into the App.js.

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

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

Add Google Charts Package

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

Implement Combo Chart

Let us create the components/ folder, and the GoogleChart.js file into it.

To embed combo chart and display data into 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;

Update App Js

In this step, we will be adding 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;

Run React App

In the last step we have to check the progress, for that start the react app server.

npm start

Here is the output you will see in the browser.

Conclusion

React Google chart is a handy package, particularly when displaying the data in charts and graphs. It offers not just one but a stack of charts that you can implement in React app. Similary, in this tutorial, we learned how to create combo chart components and embed the data into charts.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

Laravel 9 Validate Internet Protocol (IPv6) Tutorial

Laravel 9 IPv6 validation example; Since IPv6 (Internet Protocol version 6) is the newest addition…

19 hours ago

React Router DOM 6 Fetch Current URL / Pathname Tutorial

If you want to learn how to get the current route's name, component pathname or…

4 days ago

React Js Hide & Show with React Bootstrap Collapse Tutorial

React show and hide example. In this tutorial, we will show you how to step…

7 days ago

How to Integrate Tabs in React Js with React Bootstrap

Tabs are one of the best UI elements for displaying multiple contents in a single…

1 week ago

How to Build Toast Component in React Js with Bootstrap

In this tutorial, we will learn how to create a toast notification component in the…

2 weeks ago

React Js Bootstrap Modal Popup Component Tutorial

Bootstrap offers tons of custom UI solutions. On top of that, it is easy to…

2 weeks ago