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 candlestick and ohlc Chart:
    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: [{
  dataPoints: [
   { y: 10,  label: "label1", toolTipContent: {name}: {y} },

  ],

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

Try various combinations below.

Try Editing The Code

  Also See:    

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

17 Comments

    • Shailendra Verma says:

      Hi Carlos,

      You can specify xValueFormatString and yValueFormatString inside data (Type: Array of Objects) for axis x values and axis y values to format the information inside the indexLabel or toolTip.

      You can read more about the syntax here.

      The example shows how to achieve the same, as well.

  2. Carlos. says:

    Hi, Does anybody know why the toolTip is display off the graph area? I want it to stay within the graph area. Any idea?

    Thanks,
    Carlos.

    • Sunil Urs says:

      When you say Graph Area do you mean the entire chart or the area between the two axis where dataPoints are drawn? If you mean the area between the two axis, then the behaviour is by design. I think it should be fine as long as the ToolTip doesn’t go outside the chart itself – which doesn’t happen as of now.

  7. Nasyarobby says:

    When I use Stepped Line Chart, the tooltip {x} value only show Month and Year, not specific to the date.
    Its make me difficult to create a link using the specific date on the datasets.

  8. Subhannita says:

    Is there a way to include a specific toolTip only for some values, say for those where y>100, where datapoints are inserted from a separate php file and unknown inside the canvasjs object ?

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