React Tutorials

How to Create and Embed Trend Lines Chart in React

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
npm install react-google-charts

# yarn
yarn add react-google-charts

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.

Digamber

I am Digamber, a full-stack developer and fitness aficionado. I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, ECMAScript, React, Angular, Vue, Laravel.

Recent Posts

React Redux Handle API Calls with Thunk Middleware Tutorial

In this post, we will learn how to work with HTTP requests in the Redux…

1 day ago

Node AJAX Retrieve Records from MySQL Database Tutorial

MySQL is a relational database management system based on SQL – Structured Query Language, and…

4 days ago

React Manage REST API State Globally with Context API Tutorial

React Js Handle Rest API data globally with Context and useState hook tutorial. In this…

1 week ago

How to Delete Data from MySQL Database using Node Js

Node js delete data from MySQL database tutorial; Throughout this guide, you will ascertain how…

1 week ago

Node Import CSV File Data to MySQL Database with HTML Form

In this tutorial, you will discover how to import CSV file into MySQL database using…

2 weeks ago

How to Handle Global State in React js using Context API

React Js Global state management with createContext hook example; In this tutorial, we will help…

2 weeks ago