score:0

Accepted answer

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

score: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.


Related Query

More Query from same tag