Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Chart.js multiTooltip labels

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 
like image 786
Alosyius Avatar asked Jul 01 '14 12:07

Alosyius


1 Answers

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)

like image 125
MBaig Avatar answered Sep 21 '22 01:09

MBaig