How to Create Stepped Area Chart Component in React 18

Last Updated on March 4, 2024 by Digamber 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 --legacy-peer-deps

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 install react-google-charts --legacy-peer-deps

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.