Overview – Chart ToolTip

When user hovers on a dataPoint or dataSeries, a toolTip appears with information about the dataPoint and dataSeries. Size of the toolTip is automatically adjusted depending on the content it holds.

In this Section we will study on how to set the content inside “toolTip” and style it.

CanvasJS HTML5 Tool Tip

Default ToolTip

By default, ToolTip content is automatically chosen based on various factors like type of the chart, whether ToolTip is shared or not, etc. ToolTip also has a border with color same as color of dataPoint or dataSeries (which can be modified).

In the example below, try different chart types to see default behaviour of toolTip.

Try Editing The Code

toolTipContent – dataSeries/dataPoint

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} "

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

  • In case of stacked, pie and doughnut charts you can also use special keywords like #percent & #total.
    eg: toolTipContent: "{y} / #total = #percent% "

  • In toolTipContent, You can also use properties which are arrays as keywords. Below is an example.
    In case of Range Chart :
    toolTipContent: " x: {x}, y: {y[0]} , {y[1]} "
    In case of candlestick and ohlc Chart :
    toolTipContent: " x: {x}, y: {y[0]}, {y[1]}, {y[2]}, {y[3]} "

  • 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}"

Try various combinations below.

Try Editing The Code

toolTip Object

toolTip object controls the behaviour of toolTip for Chart. Syntax for toolTip Object. 

var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
 toolTip:{
      // toolTip properties
 },
 .
 . 
});
chart.render();

There are number of attributes we can set inside toolTip object and Style it the way we want to. Table below lists toolTip attributes.

Attribute Type Default Options/Examples
animationEnabled Boolean true true, false
enabled Boolean true true, false
shared Boolean false true, false
borderColor String dataPoint/dataSeries Color “green”, “#FF0312”..
content String auto –
fontColor String “black” “green”, “#FF0312”..
fontStyle String “italic” “normal”, “italic”,”oblique”
fontSize Number 14 16, 12, etc
fontFamily String “Calibri, Arial, Georgia, serif” “arial” , “tahoma”, “verdana” ..
fontWeight String “normal” “lighter”, “normal”, “bold” , “bolder”
borderThickness Number 2 1, 3 etc
cornerRadius Number 5 1, 3 etc
reversed Boolean false true, false
contentFormatter Function null function(e) { }
backgroundColor String “white” “black”, “#FFFFFF” etc

Shared toolTip

In a Multi-Series or a Combinational Chart, it is often required to display all values common to x value in the same ToolTip. Settings “shared” property to true will highlight all the dataPoints for the x value and display data in a single toolTip.

Try Editing The Code

Setting Content of toolTip Object

toolTip for entire chart can be set by adding content at toolTip object. content is a string and contentFormatter is a custom function that returns HTML/String to be displayed inside the toolTip.

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

  • When content is set to a custom function, you can return any value to be displayed in the toolTip.
    Where toolTip can be shown, CanvasJS sends an object containing event related values (like dataPoint, dataSeries, etc) as a parameter to the function. Structure of the parameter sent to the function 
    e: { // parameter sent to function
  chart,
  toolTip,
  entries: [ //entries array
    {dataPoint, dataSeries},  //first dataSeries
    {dataPoint, dataSeries}, // second dataSeries 
     .
     .
  ]
}

  • Value set at toolTipContent at dataSeries and dataPoint overrides values set in content at toolTip object.
    Below is an example where a simple function returns value of dataSeries name and y value.
    toolTip: {
  contentFormatter: function(e){
    return ( e.entries[0].dataSeries.name + " " + e.entries[0].dataPoint.y + "" ) ;
  },
}
  • toolTip for entire chart can be set by adding content at toolTip object. See its implementation in next example.
Try Editing The Code

contentFormatter function for Shared toolTip.

When writing a custom function for shared toolTip, the parameter sent to the function has values of all dataSeries in the entries array, hence you need to recursively pass through the array length and create your custom toolTip. Function can return Text or HTML Content.

var str = "";
 contentFormatter: function(e){
    for (var i = 0; i < e.entries.length; i++){
        var temp = (e.entries[i].dataSeries.name);
        str = str.concat(temp);
    }
    return (str);
},
Try Editing The Code

  Also See:    

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

54 Comments

  1. basilesimon says:

    Hey,

    Is there anyway to make the toolTip only appear when the user clicks on a part of the chart/pie? Its way of behaving is particularly irritating on a doughnut.
    I can’t figure how to use the onclick event properly.

    Cheers!

    • Sunil Urs says:

      Basilesimon,

      As of now API has not been exposed to show/hide toolTip programatically. Hence it won’t be possible to show toolTip only on click event.

      —
      Sunil

      • a says:

        Just checking if toolTip can already be shown programmatically as of date?

        Would like to show toolTip upon click (more useful in tablets, hovering not applicable).

        Thanks.

  2. Carlos. says:

    Hi, How can I display the tooltip always close to the cursor? My tooltips sometimes display far from the graph.
    Thanks,
    Carlos.

    • Jon says:

      @Carlos I’m getting the same thing. Always seems to be quite a bit below my mouse cursor and the graph. Any ideas anyone?

    • sue says:

      I meet the same problem. It might be caused when you are using some bootstrap template at the same time.

      • Sunil Urs says:

        Can you please create a jsfiddle that can reproduce the issue so that we can figure out what is going wrong?

        • Sebastian says:

          Hi, is there a solution for the problem? I have currently the same issue that the tooltip is even not visible on the screen because it’s far away from the data point. Problem appears when setting width to chart and div container has scrolling enabled.
          Hope this explanes it: https://jsfiddle.net/ts9epkq1/

      • Sohei Okamoto says:

        I had a similar issue when the CanvasJS container div is within another wrapper div that defines the width and height (possibly due to float attribute). I got it working by specifying ‘height’ attribute for the chart itself.

  5. André Fx says:

    I hide the label of axis x because i want show just in tooltip, but for hide the label i set to ” “, according with comments in subject page, and now in tooltip is this (empty) that shows. can someone help?

    • Anjali says:

      Instead of setting the label to empty string, the better way to hide the label is set the valueFormatString to empty string which hides the label but shows the value in toolTip. Here is an example which can help you.

  6. dominique says:

    IS there any way to qualify with custom attributes the points of a graphic with additional info than x,y and label?

    For example I want to list the lowest price line of an item. The price might be coming from different stores and I would like my tooltip to list from where I the price was listed:

    ex:
    for an iphone

    x: 400, y: September, store: Target
    x:500, y: October, store: Walmart
    x: 450, y: November, store: Amazon
    …

  11. Gavin Coleman says:

    The tool tip keeps moving away from my mouse so I can’t click on the link within it – how do I stop this?
    Thanks

  12. Richard Hellstrand says:

    Hello

    Is it possible to make a tooltip to have the following design, I have tried but I can’t seem to understand what is possible:

    DATE
    ——
    A: 1
    B: 2
    C: 3

    I’m trying to edit the tooltip used for the High Performance Line charts. I’m doing several diagrams over power output during several days. If you have two or more days it will be hard to notice when you jump from one date to another.

    Thank you!

    Kind regards
    Richard

    • Sanjoy says:

      Richard,

      You can use contentFormatter of toolTip in this case as shown in this example.

      Whenever you have large number of dataPoints, it becomes hard to see differences between individual dataPoints and also to jump from one dataPoint to the next as there will be too many dataPoints. In such cases we suggest zooming into the region of interest in order to see finer details – we have enabled zooming in the above example.

      • Richard Hellstrand says:

        Hello Sanjoy

        It seems like the tooltip lost the colour schemes it had (the colours of the lines). What am I missing in the code you have given me, so it will also get this aspect? Is it just html styling, like ” + entry.dataSeries.name + “, or is something else required?

        Kind regards
        Richard

        • Richard Hellstrand says:

          Ah, it stripped the html coding.

          span class = colourOfLine
          entry.dataSeries.name
          span

          Kind regards
          Richard

        • Richard Hellstrand says:

          ” + entry.dataSeries.name + ”

          Yes, it did the trick. Is this a normal way of doing it (what standard are you using?)?

  13. Richard Hellstrand says:

    Hello again

    Is it possible to have a fixed position of the tooltip?

    Now with all the data that is presented and with an image, it takes up alot of space and comes in the way of the cursor so it prevents the user from enjoying the data that is presented.

    Kind regards
    Richard

  14. Sam says:

    I have a shared tooltip, and I was wondering if you could colour the tooptip name/values into the representing colour on the graph.

    An example of this is your shared tooltip graph above, is it possible to colour the Q1 blue, Q2 red,Q3 purple and Q4 green, with the values in this colour?

    I’ve seen the content formatter but I’m unsure how I would colour the tooltip/get the appropriate colour per label.

    • Sam says:

      I’ve actually been looking into more, and figured some bits out, thought I would reply to my own comment if anyone else wants a quick answer for this:

      Use the contentFormatter as shown above, it has all the information you need. You can just write HTML for it to take, and the colours are defined in the event (e), entry.dataSeries._colorSet[0]. It passes in the colour set per title.

  15. Anand says:

    Is it possible to use arithmetic operators on Tool tip content.? For example: #Total/100 etc (divide total by 100).

  16. Max says:

    How to format the toolTip’s ${y} value such as in JavaScript Number(y).toFixed(2)
    For example, changing $10.4 to $10.40.
    Thanks!

  19. Evan says:

    Is it possible to display the time and date in the tooltip in the format of: “HH-mm-ss MM/DD/YYYY”? I cannot find the way to format the time format on the tooltip as of now.

  20. JB says:

    I have noticed that with Pie charts, the tooltip doesn’t disappear when the mouse cursor moves away from the data set as with the other charts, is this a bug or an intentional function and is there a way to resolve this?

    • Vishwas R says:

      Tooltip has been designed this way and its not a bug. As long as the mouse is inside plotArea, tooltip will continue to show on the last hovered dataPoint.

  22. Eesger says:

    Hello, is it possible to let CanvasJS calculate missing datapoints in the tooptip box? Best explained with an example:
    dataset one:
    dataPoints: [
    { x: 1, y: 10 },
    { x: 2, y: 20 },
    { x: 3, y: 30 },
    { x: 4, y: 40 },
    { x: 5, y: 50 }
    ]
    dataset two:
    dataPoints: [
    { x: 1, y: 50 },
    { x: 5, y: 10 }
    ]
    When the tooltip would hover over point X on number 2 that it would say:
    dataset one : 20
    dataset two: 40 (calculated)

    Can this be done without calculating the points in between directly into “dataset two” ?

    • Sanjoy says:

      Eesger,

      As of now auto calculation for missing data is not possible. However you can programmatically calculate missing data using the equation of straight line and pass to the chart.

      • Eesger says:

        Thank you Sanjoy for answering.

        I am juggling with very large amounts of data and was hoping to avoid entering even more data..

        If I really need to see that information I understand there is no other way, a “harsh conclusion”, but at least I know now I don’t need to search further ;)

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