toolTipContent: String/ keyword

Default Tooltip can be modified at dataSeries or dataPoint level. You can add content to be displayed in toolTip using toolTipContent. toolTipContent set at dataPoint will override toolTipContent set at dataSeries level.

toolTipContent can either be literal string or keywords. You can also use HTML tags.

• toolTipContent mentioned at dataSeries applies to all dataPoints unless overwritten by toolTipContent at dataPoint level.


• While setting toolTipContent, user can use the property names as a keyword.
  eg: toolTipContent: "x: {x}, y: {y} "


• In toolTipContent, You can also use properties which are arrays as keyword.
  In case of Range Chart:
  eg: toolTipContent: " x: {x}, y: {y[0]} , {y[1]} "
  In case of candlestickChart and ohlc Charts:
  eg: toolTipContent: " x: {x}, y: {y[0]}, {y[1]}, {y[2]}, {y[3]} "


• Customize the content with any css property using inline CSS.
  eg: toolTipContent: "y: <span style='\"'color: red;'\"'>{y}</span>"
• You can also use color of dataPoint/dataSeries as keyword {color} as part of CSS.
  eg: toolTipContent: "{x}<br/> <span style='\"'color: {color};'\"'>{name}</span>, <strong>{y}</strong>",


• Like we have seen above, we can give property name as keyword. Below are some of most commonly used properties.
  eg: toolTipContent: "x:{x}, y: {y} <br/> name: {name}, label:{label}"


• Further various html5 tags can also be used, like <h1></h1>, <strong></strong>, <br/> , <hr/> etc
  eg: toolTipContent: "{label} <hr/> x: {x}, y: {y}"


• Often it is required to show a hyperlink in the toolTip. One can use anchor tag and add source as shown below.
  eg. toolTipContent: "<a href = '\"'http://apple.com'\"' target='\"'_blank'\"' >{label} </a> <hr/> x: {x}, y: {y}"

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 data: [{
  toolTipContent: "{y} sales",

  },
 ]
 .
 .
});
chart.render();

Try various combinations below.

Below is one more example showing how toolTipContent can be customized in range Charts. Note that y is an array in case of range charts.