contentFormatter: Function

A custom formatter function that returns the content (text/html) to be displayed inside the toolTip.

Note
  • toolTipContent property of dataSeries / dataPoint overrides contentFormatter.
var  chart =  new  CanvasJS.Chart("container",
{
 .
 .
toolTip:{
   contentFormatter: function ( e ) {
               return "Custom ToolTip" +  e.entries[0].dataPoint.y;  
   }  
 },

 .
 .
});
chart.render();

When content is set to a custom formatter function, you can return any text/HTML to be displayed inside the toolTip.
Below is the structure of object passed as parameter to the function. 

e: { // parameter sent to function
       chart,
       toolTip,
       entries: [ //entries array
	  {dataPoint, dataSeries},  //first dataSeries
	  {dataPoint, dataSeries}, // second dataSeries 
	  .
	  .
     ]

 }

Parameter sent to the function has values of all dataSeries in the entries array.
Hence, you need to loop through the array length to create the content string. 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