React Js Google Area and Full Stacked Area Charts Tutorial

Last updated on: by Editorial Team

React is a dynamic framework used for web development and helps you create the amply clean web application. It lets you develop dynamic functionalities with the eloquent component mechanism.

In this tutorial, you will significantly learn how to create a simple Area chart and full stacked area chart in React js application. To embed the area chart in react js app, we will take the help of React Google chart plugin.

The react google chart plugin offers tons of options; with its outstanding features, we will show you how to build the area chart in react app. Apart from the area chart, you may also create tons of other charts in react app. Like, Columns, Pie, Bar, Calendar, Diff charts and many more.

How to Integrate Google Area Charts in React Js App

  • Step 1: Install React App
  • Step 2: Add Bootstrap Package
  • Step 3: Install react-google-charts Plugin
  • Step 4: Add Google Area Charts
  • Step 5: Update App Js File
  • Step 6: Start React App

Install React App

A new react app that’s all we needed. Set up a new react app by running one command; go ahead and type the command, then hit enter.

npx create-react-app react-blog

Now that new react app skeleton has been created, step inside the app directory.

cd react-blog

Add Bootstrap Package

This step is completely optional, and we are taking the help of the Bootstrap library to create the containers or small UI for charts and graphs integration.

npm install bootstrap

Bootstrap Package is installed, now register the package’s CSS in App.js file.

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

 
function App() {
  return (
    <div>

    </div>
  );
}
 
export default App;

Install react-google-charts Plugin

To foster the charts in react is easy with google charts package. In this step, you will be installing this eloquent package through the given command.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Add Google Area Charts

To demystify the component pattern, we have to create components/ folder, and create the GoogleChart.js file and add all the given code to create the simple area chart.

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

const data = [
  ['Year', 'Sales', 'Expenses'],
  ['2013', 1000, 400],
  ['2014', 1170, 460],
  ['2015', 660, 1120],
  ['2016', 1030, 540],
];

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

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

              <Chart
                width={'700px'}
                height={'320px'}
                chartType="AreaChart"
                loader={<div>Loading Chart</div>}
                data={data}
                options={{
                  title: 'Company Performance',
                  hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
                  vAxis: { minValue: 0 },
                  // For the legend to fit, we make the chart area smaller
                  chartArea: { width: '50%', height: '70%' },
                  // lineWidth: 25
                }}
                // For tests
                rootProps={{ 'data-testid': '1' }}
              />
          </div>                  
      )
  }
}

export default GoogleChart;

You may easily create and embed the 100 Percent Stacked Areas chart in react, use the options object and its properties to fill the area stack.

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

const data = [
  ['Year', 'Sales', 'Expenses'],
  ['2013', 1000, 400],
  ['2014', 1170, 460],
  ['2015', 660, 1120],
  ['2016', 1030, 540],
];

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

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

              <Chart
                width={'700px'}
                height={'320px'}
                chartType="AreaChart"
                loader={<div>Loading Chart</div>}
                data={data}
                options={{
                  isStacked: 'relative',
                  height: 300,
                  legend: { position: 'top', maxLines: 3 },
                  vAxis: {
                    minValue: 0,
                    ticks: [0, 0.3, 0.6, 0.9, 1],
                  },
                }}
                rootProps={{ 'data-testid': '3' }}
              />            
          </div>                  
      )
  }
}

export default GoogleChart;

Update App Js File

Let us add the GoogleChat components into the main App.js 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;

Start React App

The last iota of this tutorial is to start the react app, which can be done by starting the development server via the projected command.

npm start

React Js Google Area and Full Stacked Area Charts Tutorial

Conclusion

Google charts are really helpful, and you can create almost all types of charts and graphs through this plugin. This react area chart example is good for novice react developers who want to thrive their skills in react development.

We hope you must have liked all steps that we have assorted for you to create the react area chart component.