Chart.js multiTooltip labels
chart.js, javascript
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)
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 ```