CODEWITHSUNDEEP
typescriptchart.jsreact-chartjsreact-chartjs-2
sev
sev

Reputation: 1822

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

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?

Upvotes: 0

Views: 1510

Answers (1)

Ivan Tsenilov
Ivan Tsenilov

Reputation: 216

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.

Upvotes: 4

Related Questions