Chartjs-[MIXED CHART.JS]How do I manipulate the label of each chart's tooltips?

by

0👍

✅

if I understand correctly,
you want to show each tooltip separately,
depending on which is being hovered.

so only show Power Usage when the line is hovered,
and only show Energy Usage when the bars are hovered.

if so, remove the following tooltip options, they are not needed. 

mode: 'index',
intersect: false,

this will cause the label key of the tooltips callback to be only called once.
no need to build an array, just use the single tooltipItem to build the value you want to display. 

label: function (tooltipItem, data) {
    return data.datasets[tooltipItem.datasetIndex].label + ":" + tooltipItem.yLabel;
}

see following working snippet… 

$(document).ready(function() {
    var el = document.getElementById("chart").getContext('2d'),
        type = 'bar';

    var lineDataSets = {
        labels: ["00.00","01.00","02.00","03.00","04.00","05.00","06.00","07.00","08.00","09.00","10.00","11.00","12.00","13.00","14.00","15.00","16.00","17.00","18.00","19.00","20.00","21.00","22.00","23.00"],
        datasets: [{
            type: 'line',
            label: 'Power Usage',
            data: [0,0,32,445,330,266,192,176,166,391,4508,4255,8454,4086,212,320,352,251,30,0,0,0,0,1],
            backgroundColor: 'red',
            borderColor: 0,
        },{
            type: 'bar',
            label: 'Energy Usage',
            data: [0,0,"35107","207168","202928","199310","196741","194544","192591","189412","215928","258937","226003","181577","185986","182449","178411","174656","130098",0,0,0,0,"14531"],
            backgroundColor: 0,
            borderColor: 0,
        }]
    }

    var hourTooltipCallbackLine = ["04 February 2019 00:00","04 February 2019 01:00","04 February 2019 02:00","04 February 2019 03:00","04 February 2019 04:00","04 February 2019 05:00","04 February 2019 06:00","04 February 2019 07:00","04 February 2019 08:00","04 February 2019 09:00","04 February 2019 10:00","04 February 2019 11:00","04 February 2019 12:00","04 February 2019 13:00","04 February 2019 14:00","04 February 2019 15:00","04 February 2019 16:00","04 February 2019 17:00","04 February 2019 18:00","04 February 2019 19:00","04 February 2019 20:00","04 February 2019 21:00","04 February 2019 22:00","04 February 2019 23:00"]
    var lineChartOptions = {
        animation: {
          easing: 'easeInOutBack'
        },
        legend: {
            display: false
        },
        tooltips: {
            callbacks: {
                title: function (tooltipItem, data) {
                    var arrDateTooltip = new Array();

                    tooltipItem.forEach(function (value, index) {
                        arrDateTooltip.push(hourTooltipCallbackLine[value.index])
                    });

                    return arrDateTooltip;
                },
                label: function (tooltipItem, data) {
                    return data.datasets[tooltipItem.datasetIndex].label + ":" + tooltipItem.yLabel;
                }
            }
        },
        hover: {
            mode: 'nearest',
            intersect: true
        },
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        },
    }

    new Chart(el, {
        type: type,
        data: lineDataSets,
        options: lineChartOptions
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js"></script>
<canvas id="chart"></canvas>

0👍

If I uderstand the expect result is like this:

PrintScreen

For that replace:

tooltips: {
                intersect: true,
[...]

With:

tooltips: {
                mode:'index',
                intersect: false
            }

Leave a comment