How to Create a Line Chart in React

This article will teach us how to create a Line chart in  React application.

Prerequisites of React

• Familiarity with the HTML, JavaScript.
• node.js installed

Create React Project

To create a React app, use the following command in the terminal

npx create-react-app matui

JavaScript

Copy

Install Bootstrap

Now install Bootstrap by using the following command.

npm install bootstrap

JavaScript

Copy

Now, open the index.js file and add the import Bootstrap. 

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

JavaScript

Copy

Install Google Charts 

Now install Google chart by using the following command.

npm install react-google-charts

JavaScript

Copy

Now right-click on the src folder and create a new component named 'Linechart.js'

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

JavaScript

Copy

In the above code, we have added a Multiline chart to show data comparison for three objects.

Now, import the Linechart component in the src/App.js file.

import logo from './logo.svg';
import './App.css';
import Linechart from './Linechart'
function App() {
  return (
    <div className="App">
      <Linechart/>
    </div>
  );
}

export default App;

JavaScript

Copy

Now, run the project using the 'npm start' command and check the result.

Summary

This article provides a step-by-step guide on creating a line chart in a React application using the Google Charts library.