0

I have the following options set:

export const options = {
  responsive: true,
  scales: {
    x: {
      ticks: {
        maxTicksLimit: 10,
        autoSkip: true,
        color: 'white',
      },
      type: 'time',
      adapters: {
        date: {
          locale: enGB,
        },
      },
    },
    y: {
      ticks: {
        color: 'white',
      },
    },
  },
  plugins: {
    legend: {
      display: false,
    },
    title: {
      display: true,
      text: 'IndexCoin Price',
      color: 'white',
    },
  },
}

which I then use in

 <Line options={options} data={dataSets} />

In this line vscode red underlines the first options with the problem:

"min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 4 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
          Type '{ ticks: { maxTicksLimit: number; autoSkip: boolean; color: string; }; type: string; adapters: { date: { locale: Locale; }; }; }' is not assignable to type '_DeepPartialObject<{ type: "timeseries"; } & Omit<CartesianScaleOptions, "min" | "max"> & { min: string | number; max: string | number; suggestedMin: string | number; ... 4 more ...; ticks: { ...; }; }>'.
            Types of property 'type' are incompatible.
              Type 'string' is not assignable to type '"timeseries"'.ts(2322)
types.d.ts(19, 5): The expected type comes from property 'options' which is declared here on type 'IntrinsicAttributes & Omit<ChartProps<"line", number[], Date>, "type"> & { ref?: ForwardedRef<ChartJSOrUndefined<"line", number[], Date>> | undefined; }'

This goes away if I remove type: 'time' in options. The code works fine though. Why is this happening?

sev
  • 1,500
  • 17
  • 45
  • Does this answer your question? [Typescript Type 'string' is not assignable to type](https://stackoverflow.com/questions/37978528/typescript-type-string-is-not-assignable-to-type) – Tobias S. May 25 '22 at 11:20
  • @TobiasS. thank you for linking this answer. It seems very related but I don't understand how to apply the solution to my particular problem. What should I do? – sev May 25 '22 at 11:23
  • 1
    put `as const` behind the object at the variable declaration – Tobias S. May 25 '22 at 11:24

1 Answers1

4

Setting the type explicitly should get rid of the type error.

import {
  ChartOptions
} from "chart.js";

const options: ChartOptions<"line"> = { /* ... */ };

For more information check out FAQ in react-chartjs-2 docs.

Ivan Tsenilov
  • 176
  • 3
  • Setting the ChartOptions type explicitly makes it much easier to fix type problems of the options object when you have linting enabled. – JacobF Jan 30 '23 at 13:28