I want to create a React Functional Component with Typescript that displays a chart using chartjs.

My parent passes options and data to the child component that renders the line chart.

When trying to pass the options object I get the following typescript error:

The types of 'interaction.mode' are incompatible between these types.
Type 'string' is not assignable to type '"index" | "dataset" | "point" | "nearest" | "x" | "y" | undefined'.

Which is weird because my options look like this:

const options = {
    ...
    interaction: {
        ...
        mode: "index"
    },
    ...
}

Why is "index" not assignable to "index" | ...?

I tried to recreate the error in stackblitz and although the error don't pop up in the preview it still seem to occur:

Link to Stackblitz

CodePudding user response：

When I change my options to

const options = {
    ...
    interaction: {
        ...
        mode: "index" as "index"
    },
    ...
}

it does work

CodePudding user response：

You need to define type of options:

  import { ChartOptions } from 'chart.js';

  const options: ChartOptions = {
    interaction: {
      intersect: false,
      mode: 'index',
    },
  };