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.