JS DizzyCoding

Chart.js multiTooltip labels

Jack

Chart.js multiTooltip labels – Even if we have a good project plan and a logical concept, we will spend the majority of our time correcting errors abaout javascript and chart.js. Furthermore, our application can run without obvious errors with JavaScript, we must use various ways to ensure that everything is operating properly. In general, there are two types of errors that you’ll encounter while doing something wrong in code: Syntax Errors and Logic Errors. To make bug fixing easier, every JavaScript error is captured with a full stack trace and the specific line of source code marked. To assist you in resolving the JavaScript error, look at the discuss below to fix problem about Chart.js multiTooltip labels.

Problem :

I’m trying to get charts.js to display the label name from each dataset in the tooltip.

My code:

var barChartData = {
    labels : ["January","February","March","April","May","June","July"],
    datasets : [

        {
            label: "Bob",
            fillColor : "rgba(88,196,246,0.5)",
            strokeColor : "rgba(88,196,246,0.8)",
            highlightFill: "rgba(88,196,246,0.75)",
            highlightStroke: "rgba(88,196,246,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        },
        {
            label: "Tina",
            fillColor : "rgba(74,211,97,0.5)",
            strokeColor : "rgba(74,211,97,0.8)",
            highlightFill : "rgba(74,211,97,0.75)",
            highlightStroke : "rgba(74,211,97,1)",
            data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
        }

    ]
}

var ctx = document.getElementById("canvas").getContext("2d");
window.myBar = new Chart(ctx).Line(barChartData, {
    responsive : true,
    animation: true,
    barValueSpacing : 5,
    barDatasetSpacing : 1,
    tooltipFillColor: "rgba(0,0,0,0.8)",                
    multiTooltipTemplate: "<%= label %> - <%= value %>"

});

With my above code the tooltip when hovering above “January” displays:

January
January - xx
January - xx

Any ideas how I can get it to display the following?

January
Bob - xx
Tina - xx

Solution :

Change 

window.myBar = new Chart(ctx).Line(barChartData, {
   responsive : true,
   animation: true,
   barValueSpacing : 5,
   barDatasetSpacing : 1,
   tooltipFillColor: "rgba(0,0,0,0.8)",                
   multiTooltipTemplate: "<%= label %> - <%= value %>"
});

to:

window.myBar = new Chart(ctx).Line(barChartData, {
   responsive : true,
   animation: true,
   barValueSpacing : 5,
   barDatasetSpacing : 1,
   tooltipFillColor: "rgba(0,0,0,0.8)",                
   multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
});

The change is to the last line

multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"

datasetLabel gets the value of the label from the dataset objects (in this case ‘Bob’ and ‘Tina’), whereas label gets the caption printed on the x-axis (part of the labels array)

want to update the answer, because I was searching for a long time.

You can now change the tooltips settings inside the options. See Docu:
http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

As for the asked question, to show all X data.

window.myBar = new Chart(ctx).Line(barChartData, {
  tooltips: {
   mode: 'label'
 }           
});

Cheers
Hannes

As I answered here, you can give multiTooltipTemplate a function. Put a breakpoint inside that function with ‘debugger’, and explore the given object for all the properties you’d like. Then construct a string to be displayed in your tooltip:

multiTooltipTemplate: function(v) {debugger; return someManipulation(v);}
tooltipTemplate: function(v) {return someOtherManipulation(v);}

Similar to the answer by Hannes but the documentation has been updated since then – There are various options now and the link he provided no longer goes anywhere as that option is deprecated.

I’m adding a new answer as it took me a while to find.

This is x mode – displays multiple dataset info in tooltip based on x axis

var chart = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        tooltips: {
            mode: 'x'
        }
    }
})

http://www.chartjs.org/docs/latest/general/interactions/modes.html#x

There is also ‘y’ mode. Label mode is now deprecated.

You can also use ‘point’, ‘index’ and ‘nearest’ mode.

Exit mobile version