How to Build Range Area Chart in React using Apexcharts

In this tutorial, we will show you how to create range area chart in React js using functional component, Apexcharts, and Bootstrap libraries.

A range area chart is a data visualization tool that allows us to showcase a range of values between two points for a particular scale.

A range area chart is similar to a simple area chart. However, the only difference is that it uses two lines, one for min and one for max value.

The gap between the two lines is filled with solid colour.

To draw the range area chart in React, we will use the Apexcharts library.

This module offers a range area chart component that you can easily install and use in React js framework using npm or yarn package managing libraries.

React Js Range Area Graph Chart Example

• Step 1: Download React Framework
• Step 2: Install Apexcharts Package
• Step 3: Make Component File
• Step 4: Create Range Area Chart
• Step 5: Update App Js File
• Step 6: Run Development Server

Download React Framework

Your system must have node and npm installed to begin with this guide.

Open the code editor, type the given command, press enter to order terminal to install the React project.

npx create-react-app my-react-app

Once the app is installed, use below command to move inside the project folder.

cd my-react-app

Install Apexcharts Package

We may use the yarn or npm to install the Apexcharts and bootstrap libraries in your React application.

npm i react-apexcharts apexcharts bootstrap --legacy-peer-deps

Make Component File

Create the new directory inside the src/ folder, you may name it components/, and create the ApexRangeChart.js file.

import React from 'react'
function ApexRangeChart() {
  return (
    <div></div>
  )
}
export default ApexRangeChart

Create Range Area Chart

In order to use the Apexharts library, you must import it at the top section. After defining the library, you can access the Apis.

Add the data that you have to display on the range area chart, and change the type props to the range area.

Update code in components/ApexRangeChart.js file.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ApexRangeChart from "./components/ApexRangeChart";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Apexcharts Range Area Chart Example</h2>
      <ApexRangeChart />
    </div>
  );
}
export default App;

Update App Js File

In the last step, we have to add the ApexRangeChart in the App.js file. It will shows the range area chart on the browser.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ApexRangeChart from "./components/ApexRangeChart";
function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">React Apexcharts Range Area Chart Example</h2>
      <ApexRangeChart />
    </div>
  );
}
export default App;

Run Development Server

You can start the React development server by using the given command.

npm start

Open the app on the given URL.

http://localhost:3000

Summary

In this tutorial, we have learned how to implement a range area chart in React js with the help of the Apexcharts library.

You can customize the range chart or create other charts and graphs by visiting here.