Improve ChartJS Tooltip to contain the dataset label name, similar to ChartJs Linear Axis default.

[escay]

When using a ChartJs Linear Axis I see a default tooltip with the dataset label name in it:

When using ChartJs (3.6.2 with Luxon 3.0 and chartjs-adapter-luxon 1.1.0) Time Cartesian Axis I see a default tooltip without the dataset label name in it:

Similar issue as described here, which contains a workaround and a fiddle example:
https://stackoverflow.com/questions/68022814/does-the-chart-js-tooltip-not-work-with-logarithmic-or-the-cartesian-time-axis

I am suspecting the chartjs-adapter to influence this (because I also tried https://github.com/chartjs/chartjs-adapter-date-fns adapter, which does not even have the colour icon in the tooltip).

Without the dataset name it makes it hard to read the tooltip and relate it to the correct data.
It would be very nice if the default could also show the dataset name.

I tried using callbacks myself to influence the behaviour, like instruct ChartJs to use something like:
https://stackoverflow.com/questions/72374970/how-to-provide-different-labels-in-chart-js-for-toolbox-and-axis

                 label: function(context) {
                    let label = context.dataset.label + ": " + context.dataset.data[context.datasetIndex];
                    return label;
                 }

but I could not get it to work. So I cannot give you a more precise example.

[kurkle]

Looks like a scatter chart the 2nd image (vs line in the first)? This adapter has nothing to do with the tooltip itself, it only provides formatting capabilities of the timestamps.

[escay]

Thank you for having a look.

The first chart is a line chart using Linear axis:
https://www.chartjs.org/docs/latest/axes/cartesian/linear.html

The second chart is line chart using Time axis:
https://www.chartjs.org/docs/latest/axes/cartesian/time.html

Like:

const chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        scales: {
            x: {
                type: 'time',
            }
        }
    }
});

I thought the tooltip formatting was handled with this plugin because the date data is in millis since epoch, but shown in the tooltip as "2 August 2022, 00:45:00".
But if this is not caused by the adapter, and the adapter only converts the date part of the tooltip I will ask at ChartJs why there is a tooltip difference.

[kurkle]

https://github.com/chartjs/Chart.js/blob/9ab50e6313f4233bd561c1824c2c7aec28c8e379/src/controllers/controller.scatter.js#L153

Its the controllers (= chart type) that override the default tooltip. That is why I thought the 2nd image was from a scatter chart, beceuse the tooltip looks like the tooltip from scatter chart.

For example of the default tooltip on line/time: https://www.chartjs.org/docs/latest/samples/scales/time-line.html
And line/category: https://www.chartjs.org/docs/latest/samples/line/line.html

The chart.js samples use luxon adapter with time scale.

[kurkle]

There is a tooltipFormat option in the time scale, where you can define how you want the timestamp formatted.

scales: {
 x: {
  type: 'time',
  time: {
    // Luxon format string
    tooltipFormat: 'DD T'
  }
 }
}

[escay]

Thank you for the tooltipFormat hint, I use the Luxon format already with success on the X axis label.
I will look into the scatterchart hint, I could have made a mistake there.

Testing in a codepen shows the tooltip I would expect, including dataset label in the tooltip:
https://codepen.io/escay/pen/LYddRzb

[escay]

I can confirm it was a bug on my side and not related to any date / time formatting at all.
Somewhere in my code

const chart = new Chart(ctx, {
    type: 'scatter',

was generated. Now using 'line' and the tooltip is including the dataset label:

Thank you @kurkle for recognizing the scatter plot tooltip.