How to Build Column Bar Chart using React 18 Apexcharts

Last Updated on March 4, 2024 by Digamber in React JS

A column chart is a type of chart that helps in showing the data in vertical bars. Column chart offers an easy way to compare categorical data.

Each and every column in the chart shows a category, and the height of the column represents the value of the data for the specific category.

In this tutorial, we will learn how to create vertical column bar chart component in React js functional component.

To build the column chart in React we will use 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 web developers to create intuitive charts.

We have elaborated entire process in simple steps to create the column chart in react js component.

React Js Column Bar Chart Tutorial

• Step 1: Setup React Project
• Step 2: Install Apexcharts Package
• Step 3: Make New Component
• Step 4: Create Column Chart Component
• Step 5: Update App Js File
• Step 6: Run Development Server

Setup React Project

The first requirement of this quick tutorial is to Install node js and npm, and we can grab the tool from the official website.

Open the code editor’s command-prompt, enter the given command and hit enter.

npx create-react-app my-react-app

We now get inside the project folder.

cd my-react-app

Install Apexcharts Package

On the terminal screen type the command to install the Apexcharts and bootstrap modules.

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

Make New Component

Create the new folder within the src/ directory, name it components/, next make the ApexColumnBarChart.js file.

import React from 'react'

function ApexColumnBarChart() {
  return (
    <div></div>
  )
}

export default ApexColumnBarChart

Create Column Chart Component

You must 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.

Add code in components/ApexColumnBarChart.js file.

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

const data = {
  series: [
    {
      name: "Net Profit",
      data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
    },
    {
      name: "Revenue",
      data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
    },
    {
      name: "Free Cash Flow",
      data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
    },
  ],
  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: [
        "Feb",
        "Mar",
        "Apr",
        "May",
        "Jun",
        "Jul",
        "Aug",
        "Sep",
        "Oct",
      ],
    },
    yaxis: {
      title: {
        text: "$ (thousands)",
      },
    },
    fill: {
      opacity: 1,
    },
    tooltip: {
      y: {
        formatter: function (val) {
          return "$ " + val + " thousands";
        },
      },
    },
  },
};

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

export default ApexColumnBarChart;

Update Main Entry

In your React project, you have to look for src/ directory, open the App.js file.

In the main entry point; we will be importing or registering the ApexColumnBarChart component.

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

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

export default App;

View App on Browser

You have to now type the given command on the command-prompt. Make sure to run the command to start the react app server.

npm start

As soon as your server starts your app will be automatically opened on the browser.

http://localhost:3000

Summary

Apex is a JavaScript charting library that can be used to create a variety of interactive charts, including column charts.

In this guide, we have successfully taught how to use Apexcharts in React to create the basic column chart components.