Chartjs plugin labels with React

[MrWhiteX]

Hello, I'm trying to connect chartjs-plugin-labels with React. I have the newest versions of chart.js, chartjs-plugin-datalabels, react-chartjs-2 I am doing everything according to #5 and I receive this error.

   beforeDraw: function (chart) {
      if (!SUPPORTED_TYPES[chart.config.type]) {
        return;
      }
      chart._labels.forEach(function (label) {
        label.barTotalPercentage = {};
      });
    },

What am I doing wrong ?

 const state = {
    labels: appsLabel,

    datasets: [
      {
        data: percentData,
        backgroundColor: data.colors,
        borderColor: data.colors,
        borderWidth: 1,
        offset: 0,
      },
    ],
    plugins: [ChartDataLabels],
  };
  const options = {
    cutout: "80%",
    responsive: true,
    plugins: {
      legend: {
        display: false,
      },
      datalabels: {
        display: false,
        color: "white",
      },
      labels: [
        {
          render: "percentage",
          position: "outside",
          fontColor: "red",
          fontStyle: "bolder",
          textMargin: 6,
        },
      ],

      tooltip: {
        enabled: true,
        callbacks: {
          label: (tooltipItem) => {
            return `${tooltipItem.label}: ${tooltipItem.parsed} %`;
          },
        },
      },
    },
  };

and return:

<ChartProvider> 
        <Doughnut data={state} options={options} />
      </div>
</ChartProvider> 

Anyone have any idea? Thank you.

[Levy-D]

Yes, I had the same issue, created a PR #15 which solves the issue.

[DavideViolante]

I merged and released a v3.2.0, can you please guys test it out and let me know, thanks!

[MrWhiteX]

Now i have this error. Old webpack version? edit In older webpack version you have to add rule in webpack config:

 .addRule({
    test: /\/node_modules\/chart.js-plugin-labels-dv\/src\/chartjs-plugin-labels.js/,
    loader: 'babel-loader',
    options: {
      'presets': ['@babel/preset-env'],
      'plugins': ['@babel/plugin-proposal-optional-chaining']
    }
  });

Now it is working.

How to disable labels? because display:false doesn't work.

[MrWhiteX]

Hello, someone know how to disable labels for this plugin? I have tried all the options but none works for example:

 labels: {
        render: "percentage",
        position: "outside",
        fontColor: data.colors,
        fontStyle: "bolder",
        fontSize: 15,
        textMargin: 15,
        dispalay: false,
      },

ChartProvider method is working globally. How do you use it for just one chart? Thanks.

[DavideViolante]

To disable labels you should not add labels object (options.plugins.labels) at all in that Chart. This anwsers also your second question about enabling the plugin for just one chart. But on React maybe the code you are using is enabling the plugin for any instance of chartprovider. Not sure how to change that.

To force not rendering the labels try also:

render: function (args) {
  return ''
};

[MrWhiteX]

Thank you. This function is working well.