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

Share the post

Hello All, In the last React JS topic we had discussed How to create Area Chart (Google Chart) in React JS. Now, In this topic, We will move one step ahead to learn How to Create Bar Chart (Google Chart) in React JS.

We will follow almost similar steps which we had followed in the Area Chart example. Just need to change a few things that will discuss further in the post.

So, Let’s Start…

How to Create Bar 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 Bar 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 BarChart.js under the components folder.

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

import Chart from "react-google-charts";

Update the BarChart.js as shown below

return (
            <div>
                <h1>
                    Bar Chart for Student marks in subjects
                </h1>
                <Chart
                    width={'500px'}
                    height={'500px'}
                    chartType="Bar"
                    loader={<div>Loading Bar 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 BarChart.js is shown below

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

class BarChart extends Component {
    render() {
        return (
            <div>
                <h1>
                    Bar Chart for Student marks in subjects
                </h1>
                <Chart
                    width={'500px'}
                    height={'500px'}
                    chartType="Bar"
                    loader={<div>Loading Bar 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 BarChart;

Step 4: Import Chart Component

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

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

import './App.css';

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

export default App;

Step 5: Run & See the Output

We are done with the coding part. Now, We Just need to run the application in the browser & check the output.

Run the React application using the below command

npm start

Output

barchart
Bar Chart Output

Video Tutorial

Bar Chart Video

Leave a Comment