CODEWITHSUNDEEP
reactjstypescriptchart.jsreact-chartjs-2
moze
moze

Reputation: 402

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

Upvotes: 7

Views: 4693

Answers (3)

shao
shao

Reputation: 101

you can try this

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

Upvotes: 10

Moala
Moala

Reputation: 11

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.

Upvotes: 1

LeeLenalee
LeeLenalee

Reputation: 31421

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

Upvotes: 0

Related Questions