warning in chartjs/react-chartjs options assignment if setting type:'time'

Question

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?

Does this answer your question? Typescript Type 'string' is not assignable to type — Tobias S.
– Tobias S., Commented May 25, 2022 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
– sev, Commented May 25, 2022 at 11:23
put as const behind the object at the variable declaration — Tobias S.
– Tobias S., Commented May 25, 2022 at 11:24

Ivan Tsenilov · Accepted Answer · 2022-06-01 17:00:04Z

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.

answered Jun 1, 2022 at 17:00

Ivan Tsenilov

2161 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JacobF Over a year ago

Setting the ChartOptions type explicitly makes it much easier to fix type problems of the options object when you have linting enabled.

Collectives™ on Stack Overflow

warning in chartjs/react-chartjs options assignment if setting type:'time'

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related