How to Create and Embed Trend Lines Chart in React 18

Last Updated on March 4, 2024 by Digamber in React JS

In this step-by-step tutorial, you will learn how to use Google charts to draw trend line chart in React application.

We will elaborate every instruction to create a trend line graph in React application.

A trend line is a line superimposed on a chart unveiling the overall direction of the data.

To create the trend line chart, we will be adding the React Google charts package in React.

This package also offers other charts like Scatter Charts, Bar Charts, Column Charts, Line Charts, etc.

React Js Google Trend Lines Chart Example

• Step 1: Create React App
• Step 2: Install React Google Charts Package
• Step 3: Build Trend Lines Component
• Step 4: Add Chart Component in App Js
• Step 5: Run Application

Create React App

Let us start creating a new React project, you have to use the given command to generate a new app.

npx create-react-app demo-app

After the app is generated, enter into the app.

cd demo-app

In the next step, we will install the bootstrap package.

npm install bootstrap

Further, bootstrap needs to be imported into the App.js file.

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

Install React Google Charts Package

Now, you will have to use the command to install the google charts library in React app.

npm install react-google-charts --legacy-peer-deps

Build Trend Lines Component

Next, we will create the `components` directory, after that create a new TrendChart.js file into the folder.

To build the trend chart, add the given code into the components/TrendChart.js.

import React, { Component } from 'react'
import Chart from 'react-google-charts'

const TrendData = [
  ['Diameter', 'Age'],
  [8, 37],
  [4, 19.5],
  [11, 52],
  [4, 22],
  [3, 16.5],
  [6.5, 32.8],
  [14, 72],
]

const TrendOptions = {
  title: 'Age of sugar maples vs. trunk diameter, in inches',
  hAxis: { title: 'Diameter' },
  vAxis: { title: 'Age' },
  legend: 'none',
  trendlines: { 0: {} },
}

class TrendChart extends Component {
  render() {
    return (
      <div>
        <h2>React Trend Line Chart Example</h2>
        <Chart
          width={'600px'}
          height={'350px'}
          chartType="ScatterChart"
          loader={<div>Loading Chart</div>}
          data={TrendData}
          options={TrendOptions}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}

export default TrendChart

Add Chart Component in App Js

After, the chart is ready, make sure to import the chart component in the App.js file.

import React from 'react'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import TrendChart from './components/TrendChart'

function App() {
  return (
    <div className="container mt-3">
      <TrendChart />
    </div>
  )
}

export default App

Run Application

The trend diagram is ready, ensure that you are using the given command to start the app.

npm start

Conclusion

In this tutorial, we have learned how to create a simple line chart. But it is not limited to a simple chart.

You may additionally create a polynomial and exponential trend line chart.

Plus, you can also customize the trend line chart; check out the further reference here.