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
– Marts2390, Commented May 3, 2022 at 16:23

shao · Accepted Answer · 2022-06-28 02:29:03Z

10

you can try this

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

answered Jun 28, 2022 at 2:29

shao

1013 bronze badges

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

Comments

Moala · Accepted Answer · 2022-06-08 13:26:46Z

1

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.

edited Jun 8, 2022 at 13:26

answered May 9, 2022 at 14:44

Moala

112 bronze badges

1 Comment

Masoud Ghorbani Sarini Over a year ago

I think you're missing some required options, make sure the adapters is completely configured.

LeeLenalee · Accepted Answer · 2022-05-03 18:13:54Z

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 3, 2022 at 18:13

LeeLenalee

31.9k7 gold badges62 silver badges81 bronze badges

1 Comment

moze Over a year ago

Thank You for the answer. I've updated the question. Adding the date-fns adapter didn't remove the error.

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related