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

Share the post

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

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

So, Let’s Start…

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

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

import Chart from "react-google-charts";

Update the LineChart.js as shown below

  return (
            <div>
                <h1>
                    Line Chart for Student marks in subjects
                </h1>
                <Chart
                    width={'500px'}
                    height={'500px'}
                    chartType="LineChart"
                    loader={<div>Loading Line 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: 'Exam Performance',
                        hAxis: { title: 'Student', titleTextStyle: { color: '#333' } },
                        vAxis: { title: 'marks',minValue: 0 },
                        chartArea: { width: '50%', height: '50%' },
                    }}
                />
            </div>
        );

Complete LineChart.js is shown below

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

class LineChart extends Component {
    render() {
        return (
            <div>
                <h1>
                    Line Chart for Student marks in subjects
                </h1>
                <Chart
                    width={'500px'}
                    height={'500px'}
                    chartType="LineChart"
                    loader={<div>Loading Line 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: 'Exam Performance',
                        hAxis: { title: 'Student', titleTextStyle: { color: '#333' } },
                        vAxis: { title: 'marks',minValue: 0 },
                        chartArea: { width: '50%', height: '50%' },
                    }}
                />
            </div>
        );
    }
}


export default LineChart;

Step 4: Import Chart Component

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

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

import './App.css';

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

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

Line Chart Output
Line Chart Output

Video Tutorial

Line Chart Video

Leave a Comment