toolTip object lets user set behaviour of toolTip at global level like enabling/disabling animation, setting Border Color, sharing toolTip between multiple dataSeries, etc. You can also disable the toolTip by setting enabled property to false.
var chart = new CanvasJS.Chart("container",
{
.
.
toolTip:{
// toolTip properties
.
.
},
.
.
});
chart.render();
| Applies To | Attribute | Type | Default | Options/Examples |
|---|---|---|---|---|
| toolTip | enabled | Boolean | true | true, false |
| toolTip | shared | Boolean | false | true, false |
| toolTip | content | Function, String | auto | function (e){….. } |
| toolTip | animationEnabled | Boolean | true | true, false |
| toolTip | borderColor | String | dataPoint/dataSeries Color | “green”, “#FF0312”.. |
| toolTip | fontColor | String | “black” | “green”, “#FF0312”.. |
| toolTip | fontStyle | String | “italic” | “normal”, “italic”,”oblique” |
| toolTip | fontSize | Number | 14 | 16, 12, etc |
| toolTip | fontFamily | String | “Calibri, Arial, Georgia, serif” | “arial” , “tahoma”, “verdana” .. |
| toolTip | fontWeight | String | “normal” | “lighter”, “normal”, “bold” , “bolder” |
| toolTip | borderThickness | Number | 2 | 1, 3 etc |
| toolTip | cornerRadius | Number | 5 | 1, 3 etc |
| toolTip | reversed | Boolean | false | true, false |
| toolTip | contentFormatter | Function | null | function(e) { } |
| toolTip | backgroundColor | String | “white” | “black”, “#FFFFFF” etc |
Also See:
12 Comments
How can I remove the tooltip’s shadow and the background?
I want to show only the tooltip’s number without box.
Thank you
I found when tooltip enabled is set to false, it will make the chart mulfunction should there is other tooltip properties is being set. This could be troublesome to turn on/off the tooltip on the script.
Pau,
Can you please reproduce the issue in jsfiddle so that we can have a look?
sorry, just realized the problem was due the the missing comma (,). It works
Hi, I need to let toolTip hide when I “mouseout” the point of scatter chart, or the toolTip will cover other points to lead to bad experence.
How can I do it?
Thanks in advance.
As of now toolTip is hidden only if mouse is moved outside the chart area, but we will consider adding this feature to our future version.
Thanks for your reply & help.
hi..this was very nice ..can i add in tool tip with other message like text? thanks in advance
You can do the same using tooltip.content or by using tooltip.contentFormatter.
When using two data array’s is it possible to only have tooltips enabled on one, I am trying to create a reference rangeArea but i don’t want it selectable / tooltips to show up.
Mark,
If you don’t want to show toolTip for a particular dataSeries you can set toolTipContent of that dataSeries to null.
thanks