Chartjs: how to remove datapoint info from label? - chart.js

Question

I'm trying to remove a dataset from label:
But the label callback is called twice, so i don't know how to do it.
I was expecting an array in the callback and that you can simply remove the one not needed.
here's what i have so far and tried:
var labels = [];
for (let index = 0; index < 12; index++) {
labels.push(index);
}
window.onload = function () {
var canvas = document.getElementById('elm-chart'),
ctx = canvas.getContext('2d');
var myLineChart = new Chart(ctx, {
type: 'line',
data: {
labels: labels,
datasets: [
{
label: '-15',
data: [
{
x: 0,
y: 10,
},
{
x: 1,
y: 20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 1,
y: 20,
},
{
x: 2,
y: 30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 2,
y: 30,
},
{
x: 3,
y: 35,
},
],
borderColor: 'yellow',
},
{
label: '-15',
data: [
{
x: 6,
y: -10,
},
{
x: 7,
y: -20,
},
],
borderColor: 'red',
},
{
label: '15',
data: [
{
x: 7,
y: -20,
},
{
x: 8,
y: -30,
},
],
borderColor: 'blue',
},
{
label: '25',
data: [
{
x: 8,
y: -30,
},
{
x: 9,
y: -35,
},
],
borderColor: 'yellow',
},
],
},
options: {
responsive: true,
plugins: {
legend: {
onClick: (evt, legendItem, legend) => {
let newVal = !legendItem.hidden;
legend.chart.data.datasets.forEach((dataset) => {
if (dataset.label === legendItem.text) {
dataset.hidden = newVal;
}
});
legend.chart.update();
},
labels: {
filter: (legendItem, chartData) => {
let entries = chartData.datasets.map((e) => e.label);
return entries.indexOf(legendItem.text) === legendItem.datasetIndex;
},
},
},
},
scales: {
x: {
type: 'linear',
ticks: {
stepSize: 30,
},
},
},
plugins: {
tooltip: {
callbacks: {
title: function (context) {
return [`test`, 'test2'];
},
label: function (context) {
console.log(context.dataset.label);
console.log(context.formattedValue);
console.log(context);
return [
`${context.dataset.label}:${context.formattedValue}`,
'test',
];
},
},
},
},
},
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.1/chart.min.js"></script>
<canvas id="elm-chart" width="640" height="480"></canvas>
So to be clear i don't want to remove the datapoint in the dataset. I just want to remove 1 datapoint from the label, the top one always

Answer 1

What you can do is instead of using the default tooltip instead use a html tooltip.
In the JS that makes the tooltip instead of looping over each active item you only take the first one and display that.
Official sample of html tooltip: https://www.chartjs.org/docs/master/samples/tooltip/html.html