Chartjs: how to remove datapoint info from label?

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