DEV Community

Viktor Le
Viktor Le

Posted on

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

  1. 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
Enter fullscreen mode Exit fullscreen mode
  1. Import the Necessary Components: Import the chart component, plugin, and register them with Chart.js.

  2. Set Up the Chart Configuration: Configure the options object to include the datalabels plugin.

  3. 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;
Enter fullscreen mode Exit fullscreen mode

QA for you:

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

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more

👋 Kindness is contagious

Dive into an ocean of knowledge with this thought-provoking post, revered deeply within the supportive DEV Community. Developers of all levels are welcome to join and enhance our collective intelligence.

Saying a simple "thank you" can brighten someone's day. Share your gratitude in the comments below!

On DEV, sharing ideas eases our path and fortifies our community connections. Found this helpful? Sending a quick thanks to the author can be profoundly valued.

Okay