'React chartjs 2 - Type 'string' is not assignable to type '"timeseries"'

I've been trying to set x-axis as timescale in react-chartjs-2, but can't get past this following error.

Chart options code snippet:

const options = {
   plugins: {...},
   scales: {
     x: {
       ticks: {
         autoSkip: true,
         maxTicksLimit: 4,
         minRotation: 0,
         maxRotation: 0,
       },
       beginAtZero: false,
       type: 'time',
       time: {
         unit: 'month',
       },
     },
  },
},

};

Error: Setting time property inside scales.x gives me following error:

Type 'string' is not assignable to type '"timeseries"'.

Does anyone have any clue on how to fix this?

Thank You!

Edit:

I've followed installation steps for date-fns adapter as said here - npm installed necessary dependencies, imported the adapter and added to options, removed beginAtZero property, but the error remains.

const options = {
   plugins: {...},
   scales: {
     x: {
       ticks: {
         autoSkip: true,
         maxTicksLimit: 4,
         minRotation: 0,
         maxRotation: 0,
       },
       adapters: {
         date: {
           locale: 'hr',
         },
       },
       type: 'time',
       time: {
         unit: 'month',
       },
     },
  },
},

Full error:

Type '{ plugins: { legend: { display: boolean; }; tooltip: { mode: "index"; intersect: boolean; }; }; scales: { x: { ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { ...; }; time: { ...; }; }; y: { ...; }; }; hover: { ...; }; }' is not assignable to type '_DeepPartialObject<CoreChartOptions<"line"> & ElementChartOptions<"line"> & PluginChartOptions<"line"> & DatasetChartOptions<"line"> & ScaleChartOptions<...> & LineControllerChartOptions>'.
  Types of property 'scales' are incompatible.
    Type '{ x: { ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { date: 
{ locale: string; }; }; time: { unit: string; }; }; y: { ticks: { ...; }; }; }' is not assignable to type '_DeepPartialObject<{ [key: string]: ScaleOptionsByType<keyof CartesianScaleTypeRegistry>; }>'.
      Property 'x' is incompatible with index signature.
        Type '{ ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { date: { locale: string; }; }; time: { unit: string; }; }' is not assignable to type '_DeepPartialObject<{ type: "time"; } & Omit<CartesianScaleOptions, "min" | "max"> 
& { min: string | number; max: string | number; suggestedMin: string | number; ... 4 more ...; ticks: { ...; }; }> | ... 4 more ... | undefined'.
          Type '{ ticks: { color: string; autoSkip: boolean; maxTicksLimit: number; minRotation: number; maxRotation: number; }; type: string; adapters: { date: { locale: string; }; }; time: { unit: string; }; }' 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"'.

Solution 1:^[1]

First you need to remove the beginAtZero: false since that only applies to linear scales and is conflicting with the time scale and thus it will give an error. And from the error it seems likely you dont have a date adapter installed. This is necesarry for the time scale and typings to work.

https://www.chartjs.org/docs/master/axes/cartesian/time.html#date-adapters

Solution 2:^[2]

I have the same problem at the moment. I have found this article (https://blog.devgenius.io/using-chart-js-with-react-to-create-a-line-chart-showing-progress-over-time-3e34377b1391) suggesting to move the type- and the time option into the adapter options like this:

adapters: {
  date: { locale: enGB },
  type: "time",
  time: {
    unit: "month",
  },
},

But unfortunately the options are not applied properly, so maybe there are more steps missing...

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	LeeLenalee
Solution 2	Moala

'React chartjs 2 - Type 'string' is not assignable to type '"timeseries"'

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]