How to Create Area Chart Component using React 18 Apexcharts

Last Updated on by in React JS

In this tutorial, we will teach you how to create a various Area chart component in React js functional component using Apexcharts, and Bootstrap libraries.

Apexcharts is an open-source JavaScript-based charting library.

It allows web developers to build eye-catching, visually appealing graphs and charts.

The Apexcharts library is developed using a jQuery web development library.

It takes the help of Scalable Vector Graphics for rendering charts UI.

In this guide, we will learn to implement various Area charts and how to customize apex area charts in React.

However, Apexcharts is not limited to any single chart. You can also create line charts, bar charts, column charts, pie charts, donut charts, scatter charts, and heatmap charts.

Here are some key features of Apexcharts:

Customizable options for each chart include colors, labels, tooltips, animations, and responsive design.

Easy integration with front-end frameworks, including React, Angular, and Vue.

Rich documentation and community support, including demos, examples, and tutorials.

React Js Apex Area Chart Tutorial

  • Step 1: Build React Project
  • Step 2: Install Essential Libraries
  • Step 3: Create Functional Component
  • Step 4: Build Area Chart
  • Step 5: Update App Js
  • Step 6: View App on Browser

Build React Project

We need to Install node js and npm, and you can install it from the official website.

Install a code editor of your choice; you can go for Sublime Text, VS Code, and Atom.

Navigate to the location where you want to download React app, and make sure to invoke the below command.

npx create-react-app my-react-app

Enter in the project directory.

cd my-react-app

Install Essential Libraries</h2

Now, you have to install Apexcharts and bootstrap libraries.

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

Create Functional Component

Create the new directory inside the src/ folder by the name of components/, furthermore create the ApexAreaChart.js file.

Import the Chart from ‘react-apexcharts’ package, it allows you to define the Chart component in functional class.

import React from "react";
import Chart from "react-apexcharts";

function ApexAreaChart() {
  return <></>;
}

export default ApexAreaChart;

Basic Area Chart

Define demo data in a const variable, and this data will help us visualize the basic area chart in React in relation to the apexcharts module.

To customize the look and feel of the area chart, you can define properties in the Chart component.

Add code in components/ApexLineChart.js file.

import React from "react";
import Chart from "react-apexcharts";

const data = {
  series: [
    {
      name: "Desktops",
      data: [10, 41, 35, 51, 49, 62, 69, 91, 148],
    },
  ],
  options: {
    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    title: {
      text: "Product Trends by Month",
      align: "left",
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
        opacity: 0.5,
      },
    },
    xaxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
      ],
    },
  },
};

function ApexAreaChart() {
  return (
    <>
      <Chart
        options={data.options}
        series={data.series}
        type="area"
        height={350}
      />
    </>
  );
}

export default ApexAreaChart;

Update Main Entry

Head over to the src/ directory, here you have to look for App.js file.

This is the main entry point; in order to render the area chart ui in browser you have to register the component as given below.

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ApexAreaChart from "./components/ApexAreaChart";

function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">
        React Apexcharts Area Chart Customization Example
      </h2>
      <ApexAreaChart />
    </div>
  );
}

export default App;

View App on Browser

Head over to the terminal or command-prompt, type the given command and hit enter to start the server.

npm start

Once the React server is evoked, It will serve the chart component in browser.

http://localhost:3000

Once the server is started, your react app will render the following are chart:

How to Create Area Chart Component using React Apexcharts

Summary

ApexCharts provides an assertive mechanism for building dynamic and engaging visualizations for data-driven React applications.

This post taught us how to install, set up, and Apexcharts area chart components in React js applicatIon.

Digamber - Author positronX.io

Hi, I'm Digamber Singh, a New Delhi-based full-stack developer, tech author, and open-source contributor with 10+ years' experience in HTML, CSS, JavaScript, PHP, and WordPress.