React Tutorial- How To Create Stepped Area Chart Component In React Js

How to create a Stepped Area Chart component in a React Js Application

In this guide, we will see how to create a stepped area chart in a React app from scratch. We will create a stacked stepped area chart component. We will be using 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.

 

React Js- Learn To Create Stepped Area Chart 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

 

Let’s learn in detail now:

Step 1- Install New React App

In this first step, we need to use the react cli command. Below is the command by which we have to create a new React app:

npx create-react-app test-app

 

Now, we have to get into the app by invoking the chart feature:

cd test-app

 

Step 2- Add Bootstrap Package

Further, in the second step, we will install the bootstrap in our React app. This is not necessary to install it. If you want to do it, then apply the below command:

npm install bootstrap

Afterward, we will open the App.js file and import the bootstrap CSS into the component as given below:

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

 

Step 3- Install Google Charts

Now, we will install the React Google Chart package.

We can use any of the following commands based on the package manager which we have configured:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

 

Step 4- Stepped Area Chart Component

Here, in this step, we will create a ‘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

 

Step 5- Add Chart Component In App Js

Now, in the App.js file, we will 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

 

Step 6- Start React App

Since we have reached the final step of this tutorial, we will now have to run the React app.

For that, we open the command prompt and type the following command and start the app:

npm start

 

Conclusion

So, friends, we have learned in this guide 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.

Thanks