React Tutorials

React Js Google Area and Full Stacked Area Charts Tutorial

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

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.

Digamber

I am Digamber, a full-stack developer and fitness enthusiast. I crafted this site to bestow my coding experience and love to write on JavaScript, React, Angular, Vue, Laravel.

Recent Posts

React Js Google Org Chart Integration Example Tutorial

Organizational hierarchy defines the roles and responsibilities of a person within an organization. Being a…

3 days ago

Ionic 5 Keyboard with Cordova and Ionic Native Tutorial

The keyboard helps users type whatever they want; in ionic apps, adding a keyboard is…

6 days ago

React Js Multiple Line Chart with Google Charts Tutorial

How do you show data on charts that change over time? If you don't know…

1 week ago

React Js Google Line and Box Intervals Charts Tutorial

In this quick tutorial, we will learn how to create interval charts in React application.…

2 weeks ago

React Js Histogram / Segmented Columns Chart Tutorial

In this tutorial, you will learn how to display data in a histogram chart in…

2 weeks ago

How to Create Google Geo or Region Chart in React Js

What if? If you have to display the data based on a country, continent, region…

3 weeks ago