React Apexcharts: Create & Download Column Bar Chart with Bootstrap

Introduction

In this article, I will show you steps to create a Column Bar Chart component in React JS functional component using Apexcharts and Bootstrap libraries. Know the vertical column bar chart component in React js functional component. For column charts in React, we need Apexcharts and Bootstrap packages. Apexcharts is a free, open-source JavaScript chart library. It offers each and every type of chart and graph that allows UI developers to create attractive charts with Real-Time data.

Note. Before going through this session, please visit my previous article related to React applications, as mentioned below.

• Part-1: React setup and Build Area Chart using React Apexcharts
• React Articles

Step 1. Create New Component

Create a component named ReactApexColumnBarChart.js under /components/ReactApexColumnBarChart.

Code in ReactApexColumnBarChart.js

import React from "react";
import Chart from "react-apexcharts";
const data = {
  series: [
    {
      name: "Male",
      data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 70, 14, 84],
    },
    {
      name: "Female",
      data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 60, 16, 76],
    },
    {
      name: "Unknown",
      data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 80, 20, 100],
    },
  ],
  options: {
    chart: {
      type: "bar",
      height: 350,
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
        endingShape: "rounded",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ["transparent"],
    },
    xaxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
    },
    yaxis: {
      title: {
        text: "$ (thousands)",
      },
    },
    fill: {
      opacity: 1,
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return "$ " + val + " thousands";
        },
      },
    },
  },
};
function ReactApexColumnBarChart() {
  return (
    <>
      <Chart
        options={data.options}
        series={data.series}
        type="bar"
        height={350}
      />
    </>
  );
}
export default ReactApexColumnBarChart;

Code Description

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

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

The series section is shown below.

series: [
    {
      name: "Male",
      data: [44, 55, 57, 56, 61, 58, 63, 60, 66, 70, 14, 84],
    },
    {
      name: "Female",
      data: [76, 85, 101, 98, 87, 105, 91, 114, 94, 60, 16, 76],
    },
    {
      name: "Unknown",
      data: [35, 41, 36, 26, 45, 48, 52, 53, 41, 80, 20, 100],
    },
  ],

The options section is shown below.

options: {
    chart: {
      type: "bar",
      height: 350,
    },
    plotOptions: {
      bar: {
        horizontal: false,
        columnWidth: "55%",
        endingShape: "rounded",
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      show: true,
      width: 2,
      colors: ["transparent"],
    },
    xaxis: {
      categories: [
        "Jan",
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
        "Nov",
        "Dec"
      ],
    },
    yaxis: {
      title: {
        text: "$ (thousands)",
      },
    },
    fill: {
      opacity: 1,
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return "$ " + val + " thousands";
        },
      },
    },
  },

The chart type is defined under the options section.

options: {
    chart: {
      type: "bar",
      height: 350,
    }

We should define the data you want to show in the column chart, including the values and categories you want to visualize. Configure the chart settings by defining the options object. It helps in managing the chart title, axis labels, and colors.

Step 2. Update App.js

App.js is the main entry point and here we will be importing or registering the ReactApexColumnBarChart component.

Code in App.js

import React from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import ReactApexColumnBarChart from "./components/ReactApexColumnBarChart";
function App() {
  return (
    <div className="container mt-3">
      <h4 className="mb-3 card bg-danger text-white">
      Create & Download React Apexcharts Column Bar Chart Customization By Satyaprakash
      </h4>
      <ReactApexColumnBarChart />
    </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 ReactApexColumnBarChart from "./components/ReactApexColumnBarChart";

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

function App() {
  return (
    <div className="container mt-3">
      <h4 className="mb-3 card bg-danger text-white">
      Create & Download React Apexcharts Column Bar Chart Customization By Satyaprakash
      </h4>
      <ReactApexColumnBarChart />
    </div>
  );
}

Output

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

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

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 Column Bar Chart component in React component using Apexcharts and Bootstrap libraries.

Thank You & Stay Tuned For More