How to Create Area Chart (Google Chart) in React JS

Share the post

Hello All, In the last react js tutorial we had discussed How to make the REST API calls in react js using the fetch() method. Now, In this react js tutorial, we will discuss how to create Area Chart ( Google Chart ) in React JS with the help of a simple example.

In this example, We will take the student’s name (A, B, C, D) on one axis & marks on another axis. We will show their respective subject marks with the help of the area chart offered by google.

So, Let’s Start

How to Create Area Chart (Google Chart) in React JS Example

  • Step 1: Create a new react js project
  • Step 2: Install npm dependency
  • Step 3: Create a separate component & Write the logic
  • Step 4: Import Chart Component
  • Step 5: Run & See the Output

Step 1: Create a new react js project

To Create Area Chart Example in React JS, We will create a new project using the following command

npx create-react-app myapp

Now, Go to our newly created project path using the below command

cd myapp

Open the newly created project in Visual Studio Code using the below command

code .

Step 2: Install npm dependency

Now, We need to install google chart npm dependency using the below command

npm i react-google-charts

Step 3: Create a separate component & Write the logic

We will create a separate component folder named components. Now, Create a new file AreaChart.js under the components folder.

Now, We will import Chart from react-google-charts

import Chart from "react-google-charts";

Update the AreaChart.js as shown below

render() {
        return (
            <div>
                <h1>
                    Area Chart for Student marks in subjects
                </h1>
                <Chart
                    width={'500px'}
                    height={'500px'}
                    chartType="AreaChart"
                    loader={<div>Loading Area Chart</div>}
                    data={[
                        ['Student', 'English', 'Maths', 'History', 'Geography'],
                        ['A', 80, 70, 45, 87],
                        ['B', 90, 47, 88, 90],
                        ['C', 88, 67, 82, 95],
                        ['D', 50, 70, 56, 63]
                    ]}
                    options={{
                        title: 'Company Performance',
                        hAxis: { title: 'Student', titleTextStyle: { color: '#333' } },
                        vAxis: { minValue: 0 },
                        chartArea: { width: '50%', height: '50%' },
                    }}
                />
            </div>
        );
    }

Complete AreaChart.js is shown below

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

class AreaChart extends Component {
    render() {
        return (
            <div>
                <h1>
                    Area Chart for Student marks in subjects
                </h1>
                <Chart
                    width={'500px'}
                    height={'500px'}
                    chartType="AreaChart"
                    loader={<div>Loading Area Chart</div>}
                    data={[
                        ['Student', 'English', 'Maths', 'History', 'Geography'],
                        ['A', 80, 70, 45, 87],
                        ['B', 90, 47, 88, 90],
                        ['C', 88, 67, 82, 95],
                        ['D', 50, 70, 56, 63]
                    ]}
                    options={{
                        title: 'Company Performance',
                        hAxis: { title: 'Student', titleTextStyle: { color: '#333' } },
                        vAxis: { minValue: 0 },
                        chartArea: { width: '50%', height: '50%' },
                    }}
                />
            </div>
        );
    }
}


export default AreaChart;

Step 4: Import Chart Component

Now, We will import the AreaChart component in our App.js as shown below

import * as React from 'react';
import AreaChart from "./components/AreaChart";

import './App.css';

function App() {
  return (
    <AreaChart />
  );
}

export default App;

Step 5: Run & See the Output

Now, Everything is done. Just need to run the application in the browser & check the output.

Run the React application using the below command

npm start

Output

output
output

Video Tutorial

Area Chart in React JS

Leave a Comment