React Column Bar Chart Tutorial

A bar chart, also known as a bar graph, is a graphical representation of data using rectangular bars with heights or lengths proportional to the values that they represent. The bars can be plotted vertically or horizontally. A vertical bar chart is sometimes called a column chart.

ApexCharts is a modern JavaScript charting library that helps developers create beautiful and interactive visualizations for web pages. It is open-source and free to use in commercial applications.

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.

Table of Contents

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

Step 1: Setup React Project

First need to install node js and npm and we can get this 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

Step 2: 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

Step 3: 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

Step 4: 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;

Step 5: 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;

Step 6: Run Development Server

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

Now you can build your own column bar charts using React and Apexcharts.

Thanks for reading !!!

#react