Adding data labels inside charts in ReactJS is not working?

Question

Example How to display data on top of line chart

issues faced while implementing:

chartjs Plugin "chartjs-plugin-datalabels:1.0.0" import is throwed below error

TypeError : Cannot read property 'extend' of undefined.

Above error resolved by changing the labels plugin package to test version 2.0.0-rc.1

Link to codesandbox will find HERE

A similar question was asked here but the solutions couldn't resolve my issue.

Any kind of help will much be appreciated.

import React, { Fragment } from "react";
import { Line } from "react-chartjs-2";
import "chartjs-plugin-datalabels";

const styles = {
  dangerColor: {
    color: "red"
  },
  geen: {
    color: "green"
  }
};

const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May"],
  datasets: [
    {
      label: "Avg interest by month",
      data: [0.7, 0.81, 0.71, 0.87, 0.9],
      fill: false,
      backgroundColor: "transparent",
      borderColor: "#06a1e1",
      tension: 0.1,
      borderWidth: 4
    }
  ]
};

const options = {
  maintainAspectRatio: false,
  scales: {
    x: {
      grid: {
        display: false
      }
    },
    y: {
      display: false,
      grid: {
        display: false
      }
    }
  },
  plugins: {
    legend: {
      display: false
    },
    title: {
      display: true,
      text: "Avg interest by month (days)",
      padding: {
        bottom: 30
      },
      weight: "bold",
      color: "#00325c",
      font: {
        size: 13
      },
      align: "start"
    },
    datalabels: {
      display: true,
      color: "white"
    }
  }
};

const LineChart = () => (
  <Fragment>
    <div style={{ height: "300px" }}>
      <Line data={data} options={options} />
    </div>
  </Fragment>
);


export default LineChart;

This is how my Package.json dependencies looks like

{
    "chart.js": "^3.3.2",
    "chartjs-plugin-datalabels": "^2.0.0-rc.1",
    "react": "^17.0.2",
    "react-chartjs-2": "^3.0.3",
    "react-dom": "^17.0.2",
    "react-scripts": "^4.0.3",
    "web-vitals": "^1.1.2"
}

score 25 · Answer 1 · edited Oct 08 '21 at 16:00

25

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} />

edited Oct 08 '21 at 16:00

Schuere

1,579
19
33

answered Jul 14 '21 at 06:58

Vadimas Klepko

251
2
2

1

I searched for the whole day and try everything, only ur answer is works thanks! – Pakawat Smutkun Aug 24 '21 at 15:31
I have a multiple axes chart. Do you know how you could format datalabels for each axes separately? – Alex Bran Sep 06 '21 at 05:37
I managed to solve it: you need to add the datalabels for each dataset. – Alex Bran Sep 06 '21 at 07:20
And then how could I customize datalabels? – Time Buy Mar 09 '22 at 09:08
``` datalabels: { display: true, color: 'white', }, ``` For me it doesn't work – Time Buy Mar 09 '22 at 09:10
How do you do the config then? Because strangely enough, if I use the dataLabels plugin, the spacing between the labels and the bars in the graph is different if I register the plugin this way, as opposed to the Chart.register option – Plumpie May 26 '22 at 13:07
@TimeBuy try `dataLabels: { display: true, color: 'white'}` instead of `datalabels: {...}` – eltongonc Oct 21 '22 at 08:56

score 9 · Answer 2 · answered Jul 26 '21 at 12:43

9

I have found the issue and Updated the sandbox

You can find the link here https://codesandbox.io/s/quizzical-hooks-zcg91?file=/src/components/LineChart.jsx

The issue is with the chart.js

import { Chart } from "chart.js";
import ChartDataLabels from "chartjs-plugin-datalabels";
Chart.register(ChartDataLabels);

Plugin register method is updated in chart.js 3.x version

answered Jul 26 '21 at 12:43

Rajath

2,611
8
27
43

weirdly `const ChartDataLabels = require("chartjs-plugin-datalabels");` didnt work for me. `import` does – Kira Apr 24 '23 at 06:03

Adding data labels inside charts in ReactJS is not working?

2 Answers2

Linked