ChartJS 散点图多线工具提示，一框

Question

I am trying to customize the text in a ChartJS scatterplot tooltip. The expected result is a combination of the following:

image 1:

image2:

I would obviously like the data to be displayed appropriately as in image 1 and the title and data to be displayed separately with a body and footer with only one colored square as in image 2.

I followed the answers given here Chartjs Tooltip Line Breaks .

The verified answer (Alexey Pavlov) produces image 1 like so:

callbacks: {
   label: function(tooltipItem, data) {
       let tt = [`${data.labels[tooltipItem.index]}`];
       tt.push(`${xstat}: ${tooltipItem.xLabel}`);
       tt.push(`${ystat}: ${tooltipItem.yLabel}`);
       return tt;
   }
},

Another answer from ghanshyam shah is much closer to what I would like to achieve, producing image 2 which instead uses a footer, however it seems as though x and y values of the data point are not accessible through tooltipItem.x/yLabel in the footer callback:

callbacks: {
    label: function(tooltipItem, data) {
        return data.labels[tooltipItem.index];
    },
    footer: function(tooltipItem, data) {
        let tt = [`${xstat}: ${tooltipItem.xLabel}`];
        tt.push(`${ystat}: ${tooltipItem.yLabel}`);
        return tt;
    }
},

TL;DR: How can I access datapoint values in a ChartJS tooltip footer callback?

Answer 1

What you need is a combination of label and afterLabel callback functions as follows:

callbacks: {
   label: (tooltipItem, data) => `${data.labels[tooltipItem.index]}`,
   afterLabel: (tooltipItem, data) => [`${xstat}: ${tooltipItem.xLabel}`, `${ystat}: ${tooltipItem.yLabel}`]
},