content: String

Comments 12

1. you can use the below as well for piechart……

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

2. use e.entries[0].dataSeries.axisY.title and so on to insert axisY properties to your tooltip

3. 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).

   • Alex,

     Yes. Its possible to have custom properties. Please checkout this example.

4. 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

   • Pruthvi,

     Instead of using toolTip object please use toolTipContent property of dataSeries.

5. 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. 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. 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?

   • 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. 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.

   • For customise the toolTip more you can use contentFormatter where you can add all the things you want.