content: String

toolTip for entire chart can be set by adding content at toolTip object. content can either be HTML or text string.

Default: auto 
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 toolTip:{
   content:"x: {x}, y: {y}" ,
 },
 .
 . 
});
chart.render();

  • Here is an example that uses a combination of string literals and keywords.
    eg. content: "Category {x} <br/>Value: {y} units"

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

  • Customize the content with any css property using inline CSS.
    eg: content: "y: <span style='\"'color: red;'\"'>{y}</span>"

  • You can also use color of dataPoint/dataSeries as keyword {color} as part of CSS.
    eg: content: "{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: content: "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: content: "{label} <hr/> x: {x}, y: {y}"

  • toolTipContent property of dataSeries / dataPoint overrides content property.

  • Read more about toolTip here.
Try Editing The Code

  Also See:    

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

12 Comments

  1. Bhupi says:

    you can use the below as well for piechart……

    toolTip: {
    content: function (e) {
    var content;
    content = e.entries[0].dataPoint.legendText;
    return content;
    }
    },

  3. Alex says:

    What if I want to add a custom field to the tooltip content. I know I can add {x}, {y}, and {label}, but can I make my own? Such as {extra}, where {extra} doesn’t affect the chart in anyway (aside from the tooltip, obviously).

  4. Pruthvi Kumar says:

    Hello Team,

    I need to know how to visualize content type for secondary Y axis. For example if my primary axis’s tooltip definition is like this:

    toolTip:{
    content:”{legendText}: {y}x”,
    animationEnabled:true
    },

    I dont want the suffix ‘x’ to appear when tooltip for secondary axis is referenced. How can that be done? Please assist asap.

    Thank you in advance,
    Pruthvi

  5. yusef says:

    Hello very nice module.
    Actually is it possible to when hover/ put the mouse over a value to jump to a certain documents in the same web page.
    And is it possible to when putting a mouse over a value instead of displaying for example the:

    content:”{legendText}: {y}x”
    By
    content :{ another graph in the same page}

    actually i have in the same page a stack graph in a header,
    and in the body several bar graphs,related to the value in the stacks one.
    So I would like when pointing with the mouse on value in stacked bar to display/or jump to the bar graphs related.

    Any help,tips, or pointing would be very appreciated.

    Thanks in advance

  6. Kai Rollmann says:

    I found this useful:

    toolTip:{
    content: function(e){
    var axisY = e.entries[0].dataSeries.axisY.title;
    var axisX = e.entries[0].dataSeries.axisX.title;
    var xVal = e.entries[0].dataPoint.x;
    var yVal = e.entries[0].dataPoint.y;
    var cluster = e.entries[0].dataSeries.index;

    return axisX + ‘: ‘ + xVal +
    ” +
    axisY + ‘: ‘ + yVal +
    ‘Cluster: ‘ +
    cluster;
    }
    },

  7. Alina says:

    In the main toolTip documentation (https://canvasjs.com/docs/charts/chart-options/tooltip/) it says content can either be a function or a String, but it’s listed as a String here. Is it possible to use a function? Trying to produce a more complicated tooltip and I’m unable to use a function for the content property. I see some people have listed examples here with functions, but I’m wondering if this has been taken out in the most recent version of the library?

    • Alina says:

      Ah, I was trying to add the toolTip property under data, but that will only work if it’s “toolTipContent”. Added toolTip in the root of the options object and it works!

  8. Navinder Pal Singh Brar says:

    Can I show something on tooltip which is not in datapoints[]. Like if I am having a data something like [{label:2015,y:10},{label:2016,y:15}]{count1:12},{count2:10} So, I want to show count1 on hover of 2015 and count2 on hover of 2016 along with its Y data.

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