React JS Tutorial- Multiple Line Chart With Google Charts

React JS Multiple Line Chart With Google Charts Example

In this tutorial, we will get to know how to create a line chart in React Js app. Firstly, we will create a multiline chart component in React and then, will use Google charts to embed the line chart in React.

 

A line chart is also known as a line plot, line graph or curve chart. It is used to show the information as a series of data points which are called markers connected by straight line segments.

 

In React Js, we may use the React Google Charts plugin to create the line or multiline chart. We will be knowing the methods and techniques to create the desired chart.

 

How To Create Google A Line Chart In React Js App

Step 1- Download New React App

Step 2- Add Bootstrap Package

Step 3- Install Google Charts Package

Step 4- Create Line Charts Component

Step 5- Register New Component In App Js

Step 6- Start React App

 

Let’s learn in detail now:

Step 1- Download New React App

The first step, as we already know, is just to download or install a new React app using the below command on the terminal:

npx create-react-app google-chart

 

Then, we will get inside the project directory:

cd google-chart

 

Step 2- Add Bootstrap Package

Further, we need to add the bootstrap library after which, we can also create the user interface elements:

npm install bootstrap

 

Then, the bootstrap package’s CSS path has to be added to the App.js file. Here, we would be calling the bootstrap CSS from the node modules folder:

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

 

Step 3- Install Google Charts Package

So here, we reach an important part of this tutorial in which we have to install the Google Charts package into the React app. We can use the below options for adding the package:

# npm
npm install react-google-charts
# yarn
yarn add react-google-charts

 

Step 4- Create Line Chart Component

In this example, we will be doing things a step further since a regular line chart is used just to data comparison for over a period of time.

Hence, we will be creating a Multiline Chart for showing the data comparison for multiple objects.

We will have to create the components/MultiLineChart.js file where we use the following code:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const LineData = [
  ['x', 'dogs', 'cats'],
  [0, 0, 0],
  [1, 10, 5],
  [2, 23, 15],
  [3, 17, 9],
  [4, 18, 10],
  [5, 9, 5],
  [6, 11, 3],
  [7, 27, 19],
]
const LineChartOptions = {
  hAxis: {
    title: 'Time',
  },
  vAxis: {
    title: 'Popularity',
  },
  series: {
    1: { curveType: 'function' },
  },
}
class MultiLineChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Google Line Chart Example</h2>
        <Chart
          width={'700px'}
          height={'410px'}
          chartType="LineChart"
          loader={<div>Loading Chart</div>}
          data={LineData}
          options={LineChartOptions}
          rootProps={{ 'data-testid': '2' }}
        />
      </div>
    )
  }
}
export default MultiLineChart

 

Step 5- Register New Component In App Js

Since we have already created the chart component, the next step is to add the chart component into the App.js file.

Here, we will be registering the component in App js:

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

function App() {
  return (
    <div className="App">
      <MultiLineChart />
    </div>
  )
}
export default App

 

Step 6- Start React Application

We have reached the final step in which we just have to open the command prompt. Here, we will type the following command and execute it to run the app:

npm start

 

Conclusion

So, in this React tutorial, we have understood how to create a line chart in React. We have used the chart tag and also used some data as examples to display the comparison among them.

The steps are quite easy to follow for executing in your next React app.

 

Good luck!