React Tutorials

How to Create Stepped Area Chart Component in React Js

React is a robust framework that helps build seamless single-page applications. Building user interface features in React is not just enjoyable but straightforward as well.

In this tutorial, we will show you how to create a stepped area chart in React application from scratch. We will create a stacked stepped area chart component; we will use the Google charts library for building the chart component.

For creating charts in React, we can use React Google charts library, not just the stepped chart, but we can make some other valuable charts as well.

Ideally, a chart is an ideal way to display information to users in the form of a diagram; similary, we will use some random data and display it in the stepped area chart.

React Js Stepped Area Integration using Google Charts Example

  • Step 1: Install New React App
  • Step 2: Add Bootstrap Package
  • Step 3: Install Google Charts
  • Step 4: Stepped Area Chart
  • Step 5: Add Chart Component in App Js
  • Step 6: Start React App

Install New React App

Theoretically, the desired functionality fosters in a React project; therefore, we need to use the react cli command.

Here is the agile command, which will allow us to create a new app.

npx create-react-app test-app

To invoke the chart feature, let us get into the app.

cd test-app

Add Bootstrap Package

Now, the new project is ready, further we will install the bootstrap in our React app.

This package is not necessary if you don not want it then avoid it.

npm install bootstrap

Next, open App.js file and import the bootstrap css into the component as given below.

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

Install Google Charts

To make the chart creation more interesting and convenient, install the react google chart package.

You may use any of the commands based on the package manager you have configured on your system.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Stepped Area Chart Component

Let us create the `components` folder and a new SteppedChart.js file.

We will embed the new diagram in react class component, so ensure that you are adding the following code into the components/SteppedChart.js.

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

const steppedData = [
  ['Director (Year)', 'Rotten Tomatoes', 'IMDB'],
  ['Alfred Hitchcock (1935)', 8.4, 7.9],
  ['Ralph Thomas (1959)', 6.9, 6.5],
  ['Don Sharp (1978)', 6.5, 6.4],
  ['James Hawes (2008)', 4.4, 6.2],
]

const steppedOptions = {
  title: "The decline of 'The 39 Steps'",
  vAxis: { title: 'Accumulated Rating' },
  isStacked: true,
}

class SteppedChart extends Component {
  render() {
    return (
      <div>
        <h2>React Stepped Area Chart Example</h2>
        <Chart
          width={'600px'}
          height={'350px'}
          chartType="SteppedAreaChart"
          loader={<div>Loading Chart</div>}
          data={steppedData}
          options={steppedOptions}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}

export default SteppedChart

Add Chart Component in App Js

Now, in the App.js file you have to import and add the SteppedChart component.

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import SteppedChart from './components/SteppedChart'

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

export default App

Start React App

The minor feature is ready, and it is apparent that we have to run the React app.

So, now open the command prompt, type the given command and start the app.

npm start

Conclusion

In this quick guide, we have learned how to create and display the stepped area chart in React. A stepped area chart is typically rendered inside the browser with the help of SVG or VML, and it shows tips when the user hovers over steps.

We reckon this guide will help beginner developers to understand the chart topic.

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