interface for time scatter point

[fab313]

Currently the data scatter point interface is limited to x: number

Chart.js/types/index.esm.d.ts

Line 213 in c76ee82

export interface ScatterDataPoint {

To use in time charts, I would need that x value to be of Date format.

I think currently it's also not possible to define categorical scatter points (according to docs) with the types but I haven't tested that yet.

[kurkle]

Category points can be defined as number (= label index), but also as string which does not seem to be allowed currently.
The supported date formats depend on the date-adapter, but as a general rule string and date should be allowed for that as well.

Edit: date can be a number too = epoch.

[etimberg]

The Chart type has a type parameter that lets you override this

import { DateTime } from 'luxon';
interface TimeDataPoint {
  x: DateTime;
  y: number;
};

const timeChart = new Chart<"line", TimeDataPoint>(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: { type: 'time' },
    }
  }
});

[elvince]

The Chart type has a type parameter that lets you override this

import { DateTime } from 'luxon';
interface TimeDataPoint {
  x: DateTime;
  y: number;
};

const timeChart = new Chart<"line", TimeDataPoint>(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: { type: 'time' },
    }
  }
});

Hi,

Sorry to bump that, but why it is not in the default types as it is part of the docs to use Date for x value.

Thanks for your help.

[kurkle]

Maybe that type augmentation could be added to luxon adapter

[elvince]

And also in chartjs-adapter-date-fns 👍

I think this will be more straight forward for the developper. Having to define our own declaration for something that is managed by default is bit "weird" and more as you made a huge work to make all Typings working.

[fab313]

The Chart type has a type parameter that lets you override this

import { DateTime } from 'luxon';
interface TimeDataPoint {
  x: DateTime;
  y: number;
};

const timeChart = new Chart<"line", TimeDataPoint>(ctx, {
  type: 'line',
  data: data,
  options: {
    scales: {
      x: { type: 'time' },
    }
  }
});

yes, thank you that works for me. I was under the impression it has to be of type ScatterDataPoint or number.

btw: I haven't found much information about the types in the documentation. Is there like a best practice on how to use them?

[sadiqueali786]

I am facing an issue using DateTime over the xaxis. At all points it is showing dates and when it comes to the chart it shows number. Please check attachments

https://prnt.sc/1ti5yck