Add serie label in the tooltip #535

Closed
stephlag opened this Issue Aug 13, 2014 · 15 comments

Comments

Projects
None yet
@stephlag

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

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

This comment has been minimized.

Show comment
Hide comment
@nnnick

nnnick Aug 13, 2014

Member

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.

Member

nnnick commented Aug 13, 2014

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.

@nnnick nnnick closed this Aug 13, 2014

@gurgenhakobyan

This comment has been minimized.

Show comment
Hide comment
@gurgenhakobyan

gurgenhakobyan Aug 16, 2014

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

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

@nnnick

This comment has been minimized.

Show comment
Hide comment
@nnnick

nnnick Aug 17, 2014

Member

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.

Member

nnnick commented Aug 17, 2014

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

This comment has been minimized.

Show comment
Hide comment
@stephlag

stephlag Aug 18, 2014

By the way this attribute does not seem to be documented

By the way this attribute does not seem to be documented

@nnnick

This comment has been minimized.

Show comment
Hide comment
@gurgenhakobyan

This comment has been minimized.

Show comment
Hide comment
@gurgenhakobyan

gurgenhakobyan Aug 18, 2014

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

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

@guandai

This comment has been minimized.

Show comment
Hide comment
@guandai

guandai Apr 28, 2015

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

guandai commented Apr 28, 2015

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

@tracycollins

This comment has been minimized.

Show comment
Hide comment
@tracycollins

tracycollins Jul 27, 2015

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?

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

This comment has been minimized.

Show comment
Hide comment
@cuongpro2511

cuongpro2511 Dec 12, 2015

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

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

@deanlogic

This comment has been minimized.

Show comment
Hide comment
@deanlogic

deanlogic Jan 30, 2016

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.

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

This comment has been minimized.

Show comment
Hide comment
@okwei2000

okwei2000 Feb 9, 2016

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

got error: Uncaught ReferenceError: datasetLabel is not defined

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

got error: Uncaught ReferenceError: datasetLabel is not defined

@deanlogic

This comment has been minimized.

Show comment
Hide comment
@deanlogic

deanlogic Feb 9, 2016

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;}

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

This comment has been minimized.

Show comment
Hide comment
@carolgit

carolgit Feb 19, 2016

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

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

@tony19

This comment has been minimized.

Show comment
Hide comment
@tony19

tony19 Aug 15, 2016

@nnnick This option is not documented where you described in #535 (comment). I don't see it anywhere. Was it removed?

tony19 commented Aug 15, 2016

@nnnick This option is not documented where you described in #535 (comment). I don't see it anywhere. Was it removed?

@HannesOberreiter

This comment has been minimized.

Show comment
Hide comment

HannesOberreiter commented Aug 21, 2016

Hi @tony19,

you can now change the tooltips here:

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

Cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment