How to handle single data points nicely in ChartJS?

[resthedev]

I am using the ChartJS library via react-chartjs-2.
For my charts, I am using the Time Cartesian Axis alongside the date-fns adapter.

I am having an issue when rendering only a single data point on my line chart / bar chart / scatter chart. It currently renders like this.

It seems that since there is only one data point (and no other points to reference), it displaying the timestamps in the x scale like:

• 12:46:26.999 p.m.
• 12:46:27.000 p.m.
• 12:46:27.001 p.m.

And also nothing is drawn on my line chart when there is only a single point, since I am using a point radius of 0 and they are only shown on hover.

How can I handle these single data point cases so that

• Only the actual timestamp of the data point is rendered (not the extra ones on either side)
• I can format that timestamp nicely
• Something is displayed on the line chart when there is just a single point

I was thinking I would have to override chart options like line chart point radius, source field in ticks option, etc. to configure the options for the special case of a single data point maybe?

Or are there better, cleaner ways to handle this?

[hedii]

@resthedev Did you resolve your problem? I want to do the exact same thing