Building Vertical Bar Chart with React Chart.js 2: Quick Guid

Vertical Bar Charts are a powerful tool for organizing and comparing data. This article explores the basics of creating them with React Chart.js 2, offering a quick and effective way to enhance your data visualization.

Step 1: Install React Chart.js 2 Library

Navigate to your project directory in the terminal or command prompt and install React Chart.js 2 along with its dependency, Chart.js:

npm install --save chart.js react-chartjs-2
//or
yarn add chart.js react-chartjs-2

This command installs React Chart.js 2 and the required Chart.js library in your project.

Step 2: Create and Import the Component

Create a new component in your Nextjs application and import React Chart.js 2:

// src/components/MyDoughnutChart.js

'use client'
import React from "react";
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
} from "chart.js";
import { Bar } from "react-chartjs-2";

ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend
);

export function VerticalBarChart({ ChartData }) {
  const options = {
    plugins: {
      legend: {
        display: false,
      },
      tooltip: {
        callbacks: {
          label: function (data) {
            return "Custom Label Text:" + data.formattedValue;
          },
        },
      },
      datalabels: {
        formatter: function (value) {
           //custom money icon
          return "₺" + new Intl.NumberFormat("tr-TR").format(value);
        },
        color: "white",
        font: {
          weight: 'bold' as const,
          size:14,
          family: 'poppins'
        },
      },
    },
  };
  // The following colors will be used sequentially for the chart bars
  const backgroundColors = ["#53D9D9", "#002B49", "#0067A0"];
  const data = {
    labels: ChartData.map((item) => item.companyName),
    datasets: [
      {
        label: ChartData.map((item) => item.progressPaymentPrice),
        data: ChartData.map((item) => item.progressPaymentPrice),
        backgroundColor: backgroundColors,
        borderWidth: 1,
      },
    ],
  };

  return <Bar data={data} options={options} />;
}

Let’s see the result now

Thank you for reading, and I hope I’ve been helpful in providing the assistance you were looking for. If you have any more questions or need further support, feel free to ask. More details you can find from here.