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

Question

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"'.

If your using VScode you should be able to hover on the error and it'll tell you what type it is expecting. — Marts2390, May 03 '22 at 16:23

score 7 · Answer 1 · answered Jun 28 '22 at 02:29

7

you can try this

type: 'time' as const,
time: {
　unit: 'month' as const,
},

answered Jun 28 '22 at 02:29

shao

71
2

Moala · Answer 2 · 2022-06-08T13:26:46.067

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...

Edit:

It seems like the graph-options/the adapter don't go along well with typescript, so I could solve the issue by ignoring typescript for the file with the graph by simply adding

// @ts-nocheck

at the beginning of the file. I don't know if this is the best solution but at least the graph works now as expected.

I think you're missing some required options, make sure the adapters is completely configured. — Masoud, May 10 '22 at 22:52

score 0 · Answer 3 · answered May 03 '22 at 18:13

0

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

answered May 03 '22 at 18:13

LeeLenalee

27,463
6
45
69

Thank You for the answer. I've updated the question. Adding the date-fns adapter didn't remove the error. – moze May 03 '22 at 19:14

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

3 Answers3