How to add custom plugin to Chart.js in React Typescript Project (htmlLegendPlugin )

[gribchic]

Could anybody help me how to add custom plugin in TypeScript Rect project.

I use code from examples for html-legend

const getOrCreateLegendList = (chart: Chart, id: string) => {
there is code from example
};

const htmlLegendPlugin = {
there is code from example
};

  const barChartTransactionData: IBarChart = {
    data: {
      datasets: dataset,
      labels: labels,
    },
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: (context) => {
              return (some code);
            },
          },
        },
        htmlLegend: {
          containerID: "legend-container",
        },
        legend: {
          display: false,
        },
      },
    },
    plugins: [htmlLegendPlugin],
  };  

BarChart.tsx

export interface IBarChart extends Omit<ChartProps, "type"> {}

// Docs https://www.chartjs.org/docs/latest/charts/bar.html
export const BarChart: React.FC<IBarChart> = (props) => {
  return <ReactChart type="bar" {...props} />;
};

TypeScript is compiled with error:

TS2322: Type '{ tooltip: { callbacks: { label: (this: TooltipModel<keyof ChartTypeRegistry>, context: TooltipItem<keyof Ch
artTypeRegistry>) => string; }; }; htmlLegend: { ...; }; legend: { ...; }; }' is not assignable to type '_DeepPartialObject<Plug
inOptionsByType<keyof ChartTypeRegistry>>'.
  Object literal may only specify known properties, and 'htmlLegend' does not exist in type '_DeepPartialObject<PluginOptionsByT
ype<keyof ChartTypeRegistry>>'.

I can fix it if only I add:
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
before htmlLegend:

const barChartTransactionData: IBarChart = {
    data: {
      datasets: dataset,
      labels: labels,
    },
    options: {
      plugins: {
        tooltip: {
          callbacks: {
            label: (context) => {
              return (some code);
            },
          },
        },
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
        htmlLegend: {
          containerID: "legend-container",
        },
        legend: {
          display: false,
        },
      },
    },
    plugins: [htmlLegendPlugin],
  };  

Can anybody help me. How to add custom plugin

[etimberg]

I'm not sure where IBarChart comes from, but in the built-in types if you use ChartConfiguration as the type for barChartTransactionData it may do what you need

https://github.com/chartjs/Chart.js/blob/master/types/index.esm.d.ts#L3486-L3490