Chart.js: Add serie label in the tooltip

[stephlag]

Serie label should appear in the tooltip.
For example on bar chart:
February:

• My First dataset : 59
• My Second dataset : 48

[nnnick]

You can provide that functionality if you want by changing your tooltip template string.

In your options set multiTooltipTemplate to "<%=datasetLabel%> : <%= value %>" to do this.

[gurgenhakobyan]

Is it possible to add line breaks and other html tags inside this interpolated string?

[nnnick]

Nope - it's not actually HTML, just text being filled on a canvas.

If you want to do some more complex things within a tooltip try using the getPointsAtEvent method and creating your tooltips as DOM nodes yourself.

[stephlag]

By the way this attribute does not seem to be documented

[nnnick]

@stephlag it's in the global chart configuration: http://www.chartjs.org/docs/#getting-started-global-chart-configuration

[gurgenhakobyan]

thanks @nnnick I'll try that way (y)

[guandai]

I found in Chart.js line 1995 need to add
datasetLabel: dataset.label,
otherwise get error
Uncaught ReferenceError: datasetLabel is not defined

[tracycollins]

I'm having trouble making this work on a time series line chart.
I've just downloaded the latest Chart.js from github.

I've set:

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

but no tooltip is ever displayed.

I've managed to get something to show up, but wrong (label for each dataset is set to 'tweetsPerMin'), when i set this:

multiTooltipTemplate: "<%if (startingData.datasets[0].label){%><%=startingData.datasets[0].label%>: <%}%><%= value %>"

where startingData={
labels:[],
datasets: [
{
label: "tweetsPerMin",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,220,220,1)",
pointColor: "rgba(220,220,220,1)",
pointStrokeColor: "#fff",
data: [10]
},
{
label: "maxTweetsPerMin",
fillColor: "rgba(220,220,220,0.2)",
strokeColor: "rgba(220,0,0,0.75)",
pointColor: "rgba(120,120,120,0.75)",
pointStrokeColor: "rgba(220,0,0,0.75)",
data: [120]
}
]
}

Any ideas?

[cuongpro2511]

same problem with @tracycollins , tooltip not working if use datasetLabel.

[deanlogic]

When I try to use it
multiTooltipTemplate: "<%=datasetLabel%> : <%=value%>",
the only thing I see in the tool tip is

dataseLabel : value

I am using a php page, but I guess that wouldn't affect this.
I put my code and example of my data in a code tester and it worked, but it doesn't work on my site.

Very frustrating.

[okwei2000]

same problem with "multiTooltipTemplate: "<%=datasetLabel%> : <%=value%>", in a line chart.

got error: Uncaught ReferenceError: datasetLabel is not defined

[deanlogic]

This is how I got it to work, based of a suggestion I found on StackExchange.
Basically, you are creating a function to return the values, instead of displaying them directly.
I don't know why this works and the other way doesn't.

multiTooltipTemplate: function(chartData) {return chartData.datasetLabel + " : " + chartData.value;}

[carolgit]

Any of the option presented above helped me to change chartline add dataset label, but none of them gave me errors

[tony19]

@nnnick This option is not documented where you described in https://github.com/chartjs/Chart.js/issues/535#issuecomment-52467324. I don't see it anywhere. Was it removed?

[HannesOberreiter]

Hi @tony19,

you can now change the tooltips here:

http://www.chartjs.org/docs/#chart-configuration-tooltip-configuration

Cheers