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.

Default: auto set depending on chart type.
Examples

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.

Try Editing The Code

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.

Try Editing The Code

  Also See:    

If you have any questions, please feel free to ask in our forums.Ask Question

8 Comments

  1. Zak says:

    Hey,
    I try to have a tooltip on click, that simply shows me the label and the {y} in a pie chart, but I don’t get it :(
    Can you help me please?

  2. Sumit Patel says:

    Hi , Can I apply any conditional operator in tool tip for example (‘{y}’ == 0 ? ‘DOWN’ : ‘UP’) ?

If you have any questions, please feel free to ask in our forums. Ask Question