show values just above the respective bar

Question

I am using react-chartjs-2 for bar graph I am working on. I have plotted the data and for displaying the values above the respective bar, i used chartjs-plugin-datalabels but it is not displaying the value just above the bar.

I have done the following

import React from "react";
import ReactDOM from "react-dom";
import { Bar } from "react-chartjs-2";
import 'chartjs-plugin-datalabels'

import "./styles.css";

const dataFromApi = [
  "19,250",
  "26,454",
  "36,118",
  "49,325",
  "64,190",
  "109,807"
];

const data = {
  labels: ["2019", "2020", "2021", "2022", "2023", "2024"],
  datasets: [
    {
      backgroundColor: "rgb(47,85,151)",
      hoverBackgroundColor: "rgb(47,85,151)",
      data: dataFromApi.map(value => parseInt(value, 10))
    }
  ]
};

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Bar
        data={data}
        width={100}
        height={50}
        options={{
          plugins: {
            datalabels: {
              display: true,
              color: "black",
              align: "top",
              offset: 10,
              labels: {
                title: {
                  font: {
                    weight: "bold"
                  }
                }
              },
              formatter(value, context) {
                return `$${
                  context.chart.data.datasets[0].data[context.dataIndex]
                }k`;
              }
            }
          },
          maintainAspectRatio: false,
          legend: {
            display: false
          },
          tooltips: {
            display: false
          },
          scales: {
            xAxes: [
              {
                gridLines: {
                  display: false
                },
                barPercentage: 0.3,
                ticks: {
                  beginAtZero: true
                }
              }
            ],
            yAxes: [
              {
                display: false,
                gridLines: {
                  display: false
                },
                ticks: {
                  display: false,
                  beginAtZero: true
                }
              }
            ]
          }
        }}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is the workaround

https://codesandbox.io/s/ecstatic-fire-sroc0

I wanted the values position to be like in 2019 bar for all the bars.

score 0 · Answer 1 · answered Oct 16 '19 at 06:10

It's very difficult to set the position of the label with react-chartjs-2. Even it's not there in document as well.

But I have applied some logic for offset to get position. Hope this will bring you to right way.

offset: function(obj) {
  // Your logic will come here
  return obj.dataset.data[obj.dataIndex] / 2;
},

Here is the demo for you https://codesandbox.io/s/cool-frog-93btz.

I would suggest you to use highcharts

https://www.highcharts.com/demo/column-drilldown

Hope this will help you!

show values just above the respective bar

1 Answers1