Create & Download Area Chart using React Apexcharts with Bootstrap

Introduction

In this article, I will show you steps to create an 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 attractive, visually appealing graphs and charts. This library was developed using a jQuery web development library, and it uses Scalable Vector Graphics to render charts UI. We can build single charts, line charts, bar charts, column charts, pie charts, donut charts, scatter charts, and heatmap charts using Apexcharts.

Apexcharts key features

Customizable options available for each chart include colors, labels, tooltips, animations, and responsive design.
Easy integration with front-end frameworks, including React, Angular, and Vue.
Rich and high-level documentation and community support, including demos, examples, and tutorials.

Prerequisite

Node.js (install it from >> https://nodejs.org/en)
npm
Code editor - VS Code

Step 1. Steps to Build React Project

Create path i.e. D:\EmployeeManagement\React\1

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

D:\EmployeeManagement\React\1\>npx create-react-app my-react-app

Enter in the project directory.

D:\EmployeeManagement\React\1> cd my-react-app

The React project structure is shown below.

React project structure

Step 2. Install Apexcharts and bootstrap libraries

D:\EmployeeManagement\React\1\my-react-app> npm i react-apexcharts apexcharts bootstrap --legacy-peer-deps

Apexcharts library can be found in the project under the node_modules folder.

Apexcharts library

Step 3. Build React Functional Component

Create a new folder component under the src folder and then create the ApexAreaChart.js file.

Code in ApexAreaChart.js

import React from "react";
import Chart from "react-apexcharts";
const data = {
  series: [
    {
      name: "Employees",
      data: [10, 41, 35, 51, 49, 62, 69, 91, 148,230,320,340],
    },
  ],
  options: {
    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    title: {
      text: "Employees Count by Month",
      align: "left",
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"], 
        opacity: 0.5,
      },
    },
    xaxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
    },
  },
};
function ApexAreaChart() {
  return (
    <>
      <Chart
        options={data.options}
        series={data.series}
        type="area"
        height={350}
      />
    </>
  );
}
export default ApexAreaChart;

Code Description

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

import Chart from "react-apexcharts";

Define 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.

React component called ApexAreaChart() where we can get options and series properties from data as a const variable.

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

The series section is shown below.

series: [
    {
      name: "Employees",
      data: [10, 41, 35, 51, 49, 62, 69, 91, 148,230,320,340],
    },
  ],

The options section is shown below.

options: {
    chart: {
      height: 350,
      type: "line",
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      curve: "straight",
    },
    title: {
      text: "Employees Count by Month",
      align: "left",
    },
    grid: {
      row: {
        colors: ["#f3f3f3", "transparent"],
        opacity: 0.5,
      },
    },
    xaxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
    },
  },

The below section takes an array, which will be repeated in columns.

grid: {
      row: {
        colors: ["#f3f3f3", "transparent"],
        opacity: 0.5,
      },
    },

Step 4. Update App.js

App.js is the main entry point, and 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">
        Create & Download Apexcharts Area Chart Using React By Satyaprakash
      </h2>
      <ApexAreaChart />
    </div>
  );
}
export default App;

Code Description

We need to import the below sections for React features along with the React component and Boostrap.

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

We can call or use that React component called ApexAreaChart with opening and closing bracket <ApexAreaChart />

function App() {
  return (
    <div className="container mt-3">
      <h2 className="mb-3">
        Create & Download Apexcharts Area Chart Using React By Satyaprakash
      </h2>
      <ApexAreaChart />
    </div>
  );
}

Step 5. Landing page using index.html.

The output of React app is getting from index.html as landing page under public folder. Here we mention root in div section. No changes are required in this file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Step 6. Run React App on Browser

Go to the terminal or command prompt, type the given command, and hit enter to start the server.

D:\EmployeeManagement\React\1\my-react-app> npm start

Command prompt

Once the project is Compiled successfully and the React server is evoked, It will serve the chart component in the browser using http://localhost:3000.

Output

Once the server is started, The react app will be shown below.

React app

How this React app works is shown below. We can also download this area chart in different formats.

React App Gif

Summary

In this write-up, we have learned the details below.

Know about the Apexcharts library in React.
Learn about the React component.
Steps to install and import Apexcharts in the React application.
Build Area chart component in React component using Apexcharts and Bootstrap libraries.

Thank You & Stay Tuned For More