reactjs - Bruke chart js-alternativer med react-chartjs-2 og typescript

Jeg prøver å bruke en plugin med et react-chartjs doughnut-diagram. For å bruke pluginen (https://www.npmjs.com/package/@scottalan/chartjs-plugin-doughnutlabel), må jeg sende alternativer til komponenten. Men når jeg prøver å sende alternativer, får jeg en typefeil

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>>'.

Mitt beste gjetning er at ChartOptions er feil type å tilordne min options til fordi jeg får den samme feilen selv uten å prøve å bruke pluginet med const options: ChartOptions={}. Hele koden min er nedenfor, all hjelp er verdsatt.

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>
};

Jeg bruker react-chartjs-2 versjon 4.0.0 og react versjon 17.0.2.

Svar #1

typer eksporteres fra chart.js

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

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

Svar #2

Det viser seg at skrivefeilen kan løses ved å bruke any i stedet for ChartOptions.

const options: any = {
  ...
}

Som LeeLenalee påpekte, er det også et problem med å bruke denne spesifikke pluginen med V3 av Chart.js, men å bruke any fungerte med en annen lignende plugin.

Relaterte artikler