How to show data value on top of bar in react-chartjs-2?

Question

I made bar chart in react-chartjs-2. I want to show data value of each bar on the top of the bar. For that I used the plugin calls chartjs-plugin-datalabels But it's not showing anything.

is it possible to show each value of bar chart ?

I want to show data value somethings like this.

Here is my code.

import React, { Component } from "react";
import "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";

export default class Button extends Component {
  render() {
    const dataBar = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "#EC932F",
          borderColor: "rgba(255,99,132,1)",
          borderWidth: 1,
          hoverBackgroundColor: "rgba(255,99,132,0.4)",
          hoverBorderColor: "rgba(255,99,132,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };

    const options = {
      plugins: {
        datalabels: {
          display: true,
          color: "black"
        }
      },
      legend: {
        display: false
      }
    };
    return (
      <div>
        <Bar data={dataBar} options={options} width={100} height={50} />
      </div>
    );
  }
}

Any help would be appreciated.

Answer 1

import React, { Component } from "react";
import Chart from "chart.js/auto";
import ChartDataLabels from "chartjs-plugin-datalabels";
import { Bar } from "react-chartjs-2";

export default class Button extends Component {
  componentDidMount() {
    Chart.register(ChartDataLabels);
  }

  render() {
    const dataBar = {
      labels: ["January", "February", "March", "April", "May", "June", "July"],
      datasets: [
        {
          label: "My First dataset",
          backgroundColor: "#EC932F",
          borderColor: "rgba(255,99,132,1)",
          borderWidth: 1,
          hoverBackgroundColor: "rgba(255,99,132,0.4)",
          hoverBorderColor: "rgba(255,99,132,1)",
          data: [65, 59, 80, 81, 56, 55, 40]
        }
      ]
    };

    const options = {
      plugins: {
        datalabels: {
          display: true,
          color: "black",
          formatter: Math.round,
          anchor: "end",
          offset: -20,
          align: "start"
        }
      },
      legend: {
        display: false
      }
    };
    return (
      <div>
        <Bar data={dataBar} options={options} width={100} height={50} />
      </div>
    );
  }
}

Here you can see in componentDidMount we have registered chart data label plugin for displaying data. And another thing is in the options added few more parameters as per below field

anchor: "end",
offset: -20,
align: "start"

This is used for displaying data in the top.

Answer 2

The react-chartjs-2 package holds a plugin property which can be set on the components.

Change the import from:

import "chartjs-plugin-datalabels";

to:

import ChartDataLabels from 'chartjs-plugin-datalabels';

On your component, add the plugin variable which holds the imported value.

from:

<Line data={data} options={options} />

to:

<Line data={data} plugins={[ChartDataLabels]} options={options} />

See this original stackoverflow answer to the similar question

Answer 3

const options2 = {
plugins: {
  datalabels: {
    
 
    anchor: "end",
    align: "start",
    formatter:(value,context)=>{
      
      const datasetArray = []
      context.chart.data.datasets.forEach((dataset)=>{

        if(dataset.data[context.dataIndex] != undefined){
          datasetArray.push(dataset.data[context.dataIndex])
        }
      })

      function totalSum(total, datapoint){
        return total + datapoint;
      }

      let sum = datasetArray.reduce(totalSum,0)
      if(context.datasetIndex == datasetArray.length-1)
      return sum
      else
      return ''
   },

  },
  title: {
    display: true,
    text: 'Chart.js Bar Chart - Stacked',
  },
},
responsive: true,

scales: {
  x: {
    stacked: true,
    ticks: {
      maxRotation: 70,
      minRotation: 70
  }
    
  },
  y: {
    stacked: true,
  },
},

};

const data1 = {
labels,
datasets: [
  
  {
    label: 'Dataset One',
    data: [1,2,3,4,5,6,7],
    backgroundColor: 'rgba(255, 99, 132, 0.5)',
  },
  {
    label: 'Dataset Two',
    data: [1,8,3,4,9,6,7],
    backgroundColor: 'rgba(53, 162, 235, 0.5)',
  },

],

};

Answer 4

use this "chartjs-plugin-datalabels": "^0.5.0" version

it works for me

Here is working example

https://codesandbox.io/s/barchart-knycb