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 that, we will tell you how it is done effortlessly.

Today, one more time, we will discuss how to create a line chart in React js app. We will create a multiline chart component in React, and we will use Google charts to embed the line chart in React.

A line chart is known by the many names, such as line plot, line graph or curve chart. The line chart is typically used to show the information as a series of data points called ‘markers’ connected by straight line segments.

In React, you may use the React Google charts plugin to build the line or multiline chart. In this guide, we will share every method and technique to create the desired chart.

How to Create Google Line Charts 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 Application

Download New React App

In the first step, we will show you how to create a new react app.

For downloading a new app, you have to evoke the given command from the console.

npx create-react-app google-chart

Then, get inside the new project.

cd google-chart

Add Bootstrap Package

You may use the bootstrap library and also can create the user interface elements relentlessly.

npm install bootstrap

Bootstrap package’s CSS path has to be added into the App.js file, here you are calling the bootstrap CSS from node modules folder.

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

Install Google Charts Package

The most significant thing is installing the Google charts package into the React app; this package is exclusively built for React framework.

Here are the options, that you may use to add the package.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Create Line Charts Component

As we know, regular line charts are used to show data comparison for over period of time. Ideally, in this example, we will do things one step further than that.

We will create a Multiline chart to show data comparison for multiple objects.

So, now you have to create the components/MultiLineChart.js file and append the following code within the file.

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

Register New Component in App Js

Up until now, we have build the chart component, the subsequent task is to add the chart component into the App.js component file.

Here is how you have to register 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

Start Application

In the final step, you have to open the command prompt, type the given command and execute it to run the app.

npm start

Conclusion

So, this was it. In this guide, we have understood the process of creating the line chart in React. As an example, we used the chart tag and used the dogs and cats popularity data to display the comparison among them.