Typescript: The types of 'plugins.datalabels.font' are incompatible between these types.

[DiegoMcDipster]

I'm raising this as a discussion as I'm pretty sure this is a lack of my knowledge, as opposed to an issue.

I'm getting typescript errors on the options for the 'font' bit of the code.

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
} from "chart.js";
import ChartDataLabels, { Context } from "chartjs-plugin-datalabels";
import { Line } from "react-chartjs-2";

options: ...
    plugins: {
      datalabels: {
        font: {
          weight: "bold",
          size: 20,
        },
        formatter: (value: string, context: Context) => {
          return context.active ? "Go to \n results" : value;
        },
      },
    },

<Line height="100vh" options={options} data={data} />

It's the options that are giving the error in vscode.

The error I'm getting is:

The types of 'plugins.datalabels.font' are incompatible between these types.
    Type '{ weight: string; size: number; }' is not assignable to type '((context: Context) => Font) | _DeepPartialObject<Font> | _DeepPartialArray<Font> | undefined'.
      Type '{ weight: string; size: number; }' is not assignable to type '_DeepPartialObject<Font>'.
        Types of property 'weight' are incompatible.
          Type 'string' is not assignable to type 'number | "bold" | "normal" | "bolder" | "lighter" | undefined'.ts(2322)

tbh, I've no idea what's going on here.

Any help and advice would be greatly appreciated!

[DiegoMcDipster]

Update: I managed to get around the ts error with the following option settings:

font: {
          weight: "bold" as "bold",
          size: 20,
        },
        textAlign: "center" as "center",

This seems very very dodgy to me, so if someone can give me a better solution... I'm all ears.

[shongs27]

i think you can use as const for options.datalabels

export const options = {
  responsive: true,
  plugins: {
    legend: {
      display: false,
    },
    datalabels: {
      formatter: (value: number) => {
        return `${Math.floor(value)}회`;
      },
      display: true, // 두 그래프 겹치는 경우
      color: 'black',
      clamp: true,
      anchor: 'end',
      align: 'end',
      clip: true,
      font: {
        size: 40,
        weight: 'bold',
      },
      // offset: 100,
    } as const,
  },
};