How to visualize bar chart with react-chart-2, showing label on the bar

To create a bar chart in React using react-chartjs-2 and display labels directly on the bars (not in the tooltip), you can use the react-chartjs-2 library combined with the Chart.js DataLabels plugin.

Steps to Implement

Install the Required Libraries: Ensure you have both react-chartjs-2 and chart.js installed in your project. Additionally, install the chartjs-plugin-datalabels plugin:

npm install react-chartjs-2 chart.js chartjs-plugin-datalabels

Import the Necessary Components: Import the chart component, plugin, and register them with Chart.js.
Set Up the Chart Configuration: Configure the options object to include the datalabels plugin.
ender the Chart: Use the Bar component from react-chartjs-2 to render your chart.

Example Code

Here’s an example to create a bar chart with labels shown directly on the bars:

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

// Register Chart.js components and plugins
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ChartDataLabels // Register the DataLabels plugin
);

const BarChartWithLabels = () => {
  // Chart data
  const data = {
    labels: ["January", "February", "March", "April", "May"],
    datasets: [
      {
        label: "Sales",
        data: [30, 20, 50, 40, 60],
        backgroundColor: "rgba(75, 192, 192, 0.6)",
        borderColor: "rgba(75, 192, 192, 1)",
        borderWidth: 1,
      },
    ],
  };

  // Chart options
  const options = {
    responsive: true,
    plugins: {
      legend: {
        display: true,
        position: "top",
      },
      datalabels: {
        color: "black", // Label color
        anchor: "end", // Position the label near the bar's edge
        align: "top", // Align the label to the top of the bar
        formatter: (value) => value, // Format the label (e.g., show the value)
      },
    },
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };

  return (
    <div style={{ width: "600px", margin: "0 auto" }}>
      <Bar data={data} options={options} />
    </div>
  );
};

export default BarChartWithLabels;

QA for you:

How to customize datalabels for each dataset when using stacked bar ?

Blog

How to visualize bar chart with react-chart-2, showing label on the bar

Viktor Le

Example Code

Join Our Newsletter. No Spam, Only the good stuff.

Related