Integrate HTMLPlugin with react-chartjs-2 v4

Question

I'm trying to use a custumized Label using a plugin with react-chartjs-2.

these are the versions I am using

"chart.js": "^3.9.1",
"react-chartjs-2": "^4.3.1",
"chartjs-plugin-datalabels": "^2.1.0",

Reproduction code error: https://codesandbox.io/s/hungry-feather-yj81gq

and this is how I tried to import charts and instances

import {
  ArcElement,
  Chart as ChartJS,
  Legend as ChartjsLegend,
  Tooltip,
  TooltipItem,
  TooltipModel,
} from 'chart.js';
import ChartDataLabels from 'chartjs-plugin-datalabels';
import { Doughnut } from 'react-chartjs-2';

I use an example that's already in the documentation on Chartjs.org

https://www.chartjs.org/docs/3.9.1/samples/legend/html.html

and this is how the component look like

const renderDoughnut = useCallback(() => {
    const doughnutSize = 300;
    return (
      <Doughnut
        data={{
          labels,
          datasets: [
            {
              hoverOffset: 6,
              data,
              backgroundColor: colors,
              datalabels: {
                anchor: 'center',
                backgroundColor: null,
                borderWidth: 0,
              },
            },
          ],
        }}
        width={doughnutSize}
        height={doughnutSize}
        options={{
          responsive: false,
          maintainAspectRatio: true,
          plugins: {
            htmlLegend: {
              // ID of the container to put the legend in
              containerID: 'legend-container',
            },
            datalabels: {
              backgroundColor: null,
              borderColor: 'white',
              borderRadius: 25,
              borderWidth: 2,
              color: 'white',
              display: () => true,
              font: {
                weight: 'bold',
              },
              padding: 3,
              formatter: Math.round,
            },
            legend: {
              display: false,
            },
            tooltip: tooltips,
          },
        }}
        plugins={[htmlLegendPlugin]}
      />
    );
  }, [colors, data, labels, tooltips]);

I got this error

no dom element was created with that id

ERROR in /Users/reactnative/Sandbox/event-webapp/src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughnutChart.tsx./src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughnutChart.tsx 210:12-213:13 [tsl] ERROR in /Users/reactnative/Sandbox/event-webapp/src/pages/home/Analytics/Components/Widgets/DoughnutChart/DoughnutChart.tsx(210,13) TS2322: Type '{ htmlLegend: { containerID: string; }; datalabels: { backgroundColor: null; borderColor: string; borderRadius: number; borderWidth: number; color: string; display: () => true; font: { weight: "bold"; }; padding: number; formatter: (x: number) => number; }; legend: {...; }; tooltip: {...; }; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<"doughnut">>'. Object literal may only specify known properties, and 'htmlLegend' does not exist in type '_DeepPartialObject<PluginOptionsByType<"doughnut">>'.

Can someone please show to use htmlLegend plugin with react-chartjs-2.

Reproduction code error: https://codesandbox.io/s/hungry-feather-yj81gq

Thank you

Answer 1

The problem here is that you are telling to htmlLegendPlugin to look for a container with id legend-container but this container does not exist.

htmlLegend: {
  // ID of the container to put the legend in
  containerID: "legend-container"
},

You can solve the error adding a simple div with id legend-container to App.tsx :

export function App() {
  return (
    <>
      <div id="legend-container" />
      <Doughnut
        data={data}
        options={{
          responsive: false,
          maintainAspectRatio: true,
          plugins: {
            htmlLegend: {
              // ID of the container to put the legend in
              containerID: "legend-container"
            },
            legend: {
              display: false
            }
          }
        }}
        plugins={[htmlLegendPlugin]}
      />
    </>
  );
}

See the example running here: https://codesandbox.io/s/html-legend-plugin-chartjs-dn6eys