I'm getting the error "TypeError: Cannot read property 'extend' of undefined" when trying to import chartjs-plugin-datalabels

by

0👍

✅

I found a solution

you need to register the chartDataLabel

import { Bar, Chart } from "react-chartjs-2";
import ChartDataLabels from "chartjs-plugin-datalabels";

Chart.register(ChartDataLabels); // REGISTER PLUGIN

  const data = {
    labels: labels,
    datasets: [
      {
        label: 'label',
        data: data,
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)',
        ],
        borderColor: [
          'rgba(255, 99, 132, 1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)',
        ],
        borderWidth: 1,
        datalabels: {
          color: '#FFCE56',
          anchor: 'end',
          align  : 'start',
          color: function(context) {
            return context.dataset.backgroundColor;
          },
          font: function(context) {
            var w = context.chart.width;
            return {
              size: w < 512 ? 12 : 14,
              weight: 'bold',
            };
          }
        }
      },
    ],
  };

return (
<Bar data={data}/>
)

This post help me to find the solution

chartjs-plugin-zoom not working with my React project

👍:1

The same phenomenon happened to me.

I think this discussion will be helpful.
https://github.com/chartjs/chartjs-plugin-datalabels/discussions/213#:~:text=chart.js%203%20compatibility

The problem is probably a dependency between Chart.js version 3 and chartjs-plugin-datalabels master branch version.

I used this command to solve the problem

npm install -S chartjs-plugin-datalabels@next

This is how my dependency works.

"chart.js": "^3.3.2",
"chartjs-plugin-datalabels": "^2.0.0-rc.1",
"react-chartjs-2": "^3.0.3",

I hope this is helpful.

Leave a comment