DEV Community

Viktor Le
Viktor Le

Posted on

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

#programming #javascript #react #opensource

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 ?

Top comments (0)