Using chart js options with react-chartjs-2 and typescript

Question

I am trying to use a plugin with a react-chartjs doughnut chart. In order to use the plugin (https://www.npmjs.com/package/@scottalan/chartjs-plugin-doughnutlabel), I have to pass options to the component. But when I try to pass options, I get a type error

Type '{ doughnutlabel: { labels: { text: string; font: { size: string; family: string; style: string; weight: string; }; color: string; }[]; }; }' is not assignable to type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.
  Object literal may only specify known properties, and 'doughnutlabel' does not exist in type '_DeepPartialObject<PluginOptionsByType<keyof ChartTypeRegistry>>'.

My best guess is that ChartOptions is the wrong type to assign my options to because I get the same error event without trying to use the plugin with const options: ChartOptions = {}. My full code is below, any help is appreciated.

import React, { useEffect, ReactNode, Component } from "react"
import { Chart, ChartOptions, registerables } from 'chart.js'
import { Doughnut } from 'react-chartjs-2';

Chart.register(...registerables);

const MyDoughnut = (props: ComponentProps) => {

  const renderChart = (percents: number[]) => {
    const data = {
      datasets: [{
        label: 'Progress',
        data: percents,
        backgroundColor: [
          'rgb(255, 99, 132)',
          'transparent',
        ],
        hoverOffset: 4,
        cutout: "75%",
        radius: "100%"
      }]
    }

    const options: ChartOptions = {
      responsive: true,
      legend: {
        display: false,
        position: 'top',
      },
      title: {
        display: true,
        fontSize: 20,
        text: 'My Title'
      },
      plugins: {
        doughnutlabel: {
          labels: [
            {
              text: "Foo",
              font: {
                size: '60',
                family: 'Arial, Helvetica, sans-serif',
                style: 'italic',
                weight: 'bold'
              },
              color: '#bc2c1a'
            }
          ]
        }
      }
    }

    return <Doughnut options={options} data={data}></Doughnut>
  }

  const render = (): ReactNode => {
    // const percents = props.args["percents"]
    const percents = [76, 24];
    
    return (
      <span>
        {renderChart(percents)}
      </span>
    )
  }

  return <div>{render()}</div>
};

I am using react-chartjs-2 version 4.0.0 and react version 17.0.2.

Answer 1

types are exported from chart.js

import type { ChartData, ChartOptions } from 'chart.js';

interface DoughnutProps {
  options: ChartOptions<'doughnut'>;
  data: ChartData<'doughnut'>;
}