Javascript ChartJS散点图多行工具提示，一个框

我正在尝试自定义ChartJS散点图工具提示中的文本。 预期结果是以下各项的组合：

图1：

图2：

很明显，我希望数据能像图1那样正确显示，标题和数据能像图2那样分别显示，正文和页脚只有一个彩色正方形

我遵循这里给出的答案

经验证的答案（Alexey Pavlov）生成的图像1如下所示：

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

ghanshyam shah的另一个答案更接近于我想要实现的目标，生成了使用页脚的图像2，但是似乎无法通过页脚回调中的tooltipItem.x/yLabel访问数据点的x和y值：

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：如何访问ChartJS工具提示页脚回调中的数据点值？

您需要的是

标签和
后标签的组合，如下所示：

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