Home >Web Front-end >JS Tutorial >How to visualize bar chart with react-chart-showing label on the bar

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

Linda Hamilton
Linda HamiltonOriginal
2024-11-30 04:53:15576browse

How to visualize bar chart with react-chart-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
  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>



<p>QA for you:</p>

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

The above is the detailed content of How to visualize bar chart with react-chart-showing label on the bar. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn