Correct ChartOptions types for a Line chart with Time scale

[j-a-h-i-r]

Documentation Is:

• Missing or needed
• Confusing
• Not Sure?

Please Explain in Detail...

I want to get the correct types for a Line chart which has Time scale. From documentation I found that I can pass "line" to the ChartOptions type.

const chartOptions = ChartOptions<'line'> = {
    scales: {
      x: {
        time: {
          unit: 'day'
        }
      }
    }
  }

But the problem is I can't find any way to specify that I want to use the Time scale. As a result when I try to do the following

this.chartOptions.scales.x.time.unit = 'hour';

VSCode shows that,

Property 'time' does not exist on type '_DeepPartialObject<{ type: "linear"; } ...........

How can I use the proper types for Time scale on a Line chart so that I get the correct type checks? I could not find any documentation for this anywhere so any pointers is appreciated.

Your Proposal for Changes

Example

[etimberg]

You need to add type: 'time' to the axis definition, ie

const chartOptions = ChartOptions<'line'> = {
    scales: {
      x: {
        type: 'time',
        time: {
          unit: 'day'
        }
      }
    }
}

[etimberg]

This is mentioned in the docs in https://www.chartjs.org/docs/latest/axes/

[j-a-h-i-r]

Thanks for the snippet. I was unaware of the type: 'time' property. But even after adding it, VSCode is still saying that Property 'time' does not exist on type '_DeepPartialObject< .... when I do this :( ,

this.chartOptions.scales.x.time.unit = 'hour';

[etimberg]

I tried to reproduce this issue but could not. #9091

[ghost]

After adding this (time) correct format with Chart.js v3 , I am getting Error: "time" is not a registered scale. Any suggestions ?

[LeeLenaleee]

Chart.js is treeshakable so you will have to import and register the timescale, https://www.chartjs.org/docs/master/getting-started/integration.html#bundlers-webpack-rollup-etc

[etimberg]

Closing as stale since there is no test case

[JBaczuk]

I had the same error as @mycodedig, to get it working I had to register the TimeScale object on the chart:

import { TimeScale, ... } from 'chart.js';
Chart.register(TimeScale, ...);

Then, I got this error:

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

So, I added as any (not ideal):

type: 'time' as any,

If there is a more correct way, I'd love to know.

[LeeLenaleee]

@JBaczuk do you have a reproducable sample for this, because when I try to do it it works fine:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENYBo4BVQCmAygMboA2BcAvnAGZQQhwDkJGsAdAFYDOLAbgCwAKFFpMMTlAIBzYLxgEoACnwhiZSgEphYkQDdMcEjAAecALxwAJhBIBXDQDspsgjACilFzABCAJ4AkjYqAEQgARKwYdpw6LxwABK4ALIAMsjozka83gS+ekZQcJHR8NbOBADuKBwwKqZmOAiicO1wMAFgBABcrOTAVSxYbR026DDo-a0iHfNw5OgARgTkvP0A2mEASgQ2YThhfuQOBIdwYQCaa+QQ1RdhAOIyBM6PAAoOUGCUjwDyUGy7jCAF1RnMFu0JlNeB4NnBNrMoVClqtyP0WABiOAQOhwABqECU-AhKIWMOmiIAjAAmHDUgCcOAAzDgAKw4elwFngsZQ6ig-k0MkdCBgGDACDOBHIha8LQEWXC+ZmGYqhZdHqYyUaFga9rUUVQgLqyHkg00DXUYU2kTUXRAA

[JBaczuk]

@JBaczuk do you have a reproducable sample for this, because when I try to do it it works fine:

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgYQBYENYBo4BVQCmAygMboA2BcAvnAGZQQhwDkJGsAdAFYDOLAbgCwAKFFpMMTlAIBzYLxgEoACnwhiZSgEphYkQDdMcEjAAecALxwAJhBIBXDQDspsgjACilFzABCAJ4AkjYqAEQgARKwYdpw6LxwABK4ALIAMsjozka83gS+ekZQcJHR8NbOBADuKBwwKqZmOAiicO1wMAFgBABcrOTAVSxYbR026DDo-a0iHfNw5OgARgTkvP0A2mEASgQ2YThhfuQOBIdwYQCaa+QQ1RdhAOIyBM6PAAoOUGCUjwDyUGy7jCAF1RnMFu0JlNeB4NnBNrMoVClqtyP0WABiOAQOhwABqECU-AhKIWMOmiIAjAAmHDUgCcOAAzDgAKw4elwFngsZQ6ig-k0MkdCBgGDACDOBHIha8LQEWXC+ZmGYqhZdHqYyUaFga9rUUVQgLqyHkg00DXUYU2kTUXRAA

This example doesn't run for me:

Here's my reproduction:

https://github.com/JBaczuk/chartjs-9085-repro

[JBaczuk]

I just realized, the type definition is in react-chartjs-2 so it is probably related to that library.

UPDATE: Apparently, react-chartjs-2 uses this library for types.

react-chartjs-2 reuse types from Chart.js - reactchartjs/react-chartjs-2#1009 (comment)

[JBaczuk]

Update:

Once I added as const to the following lines, the errors are gone.

minUnit: 'minute' as const,

and

source: 'data' as const,

The confusing part is this error gave no indication that those other 2 lines needed additional type casting:

Types of property 'type' are incompatible.
              Type '"time"' is not assignable to type '"timeseries" | undefined'.ts(2322)