CODEWITHSUNDEEP
reactjsbar-chartreact-chartjs-2
kritiverma
kritiverma

Reputation: 91

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

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.

enter image description here

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.

Upvotes: 7

Views: 14534

Answers (4)

Ghias Ali
Ghias Ali

Reputation: 327

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)',
  },

],

};

Upvotes: 1

Riyaz Panarwala
Riyaz Panarwala

Reputation: 191

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.

Upvotes: 3

Dan0328
Dan0328

Reputation: 43

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

Upvotes: 3

Dulquer Arjun
Dulquer Arjun

Reputation: 11

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

it works for me

Here is working example

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

Upvotes: 1

Related Questions