Chart.js multiTooltip labels
Javascriptchart.jsJavascript Problem Overview
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
Javascript Solutions
Solution 1 - Javascript
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)
Solution 2 - Javascript
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
Solution 3 - Javascript
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);}
Solution 4 - Javascript
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.