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.
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
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';
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
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
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
In the final step, you have to open the command prompt, type the given command and execute it to run the app.
npm start
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.
In this tutorial, we will learn how to create a simple static contact form component…
In this React tutorial, we will learn how to work with asynchronous HTTP requests in…
MySQL is a relational database management system based on SQL – Structured Query Language, and…
React Js Handle Rest API data globally with Context and useState hook tutorial. In this…
Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…
In this tutorial, you will discover how to import CSV file into MySQL database using…