toolTip: Object

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();


toolTip Attributes

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
Try it Yourself by Editing the Code below.

  Also See:    



In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.

Comments 12

  1. How can I remove the tooltip’s shadow and the background?
    I want to show only the tooltip’s number without box.

    Thank you

  2. 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.

  3. 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.

  4. 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.

In order to provide better support,we have closed the comments and switched completely to our Forums.
If you have any questions, please feel free to ask in our forums.