How to Display Additional Values in Tooltip for JavaScript Column Chart?

This article explains how to display additional values in the tooltip for a JavaScript column chart.

Solution

In the tooltipRender, replace the ${point.tooltip} placeholder with the value of tooltipMappingName1 (additional data). This modification allows to include extra information alongside the existing tooltip mapping name.

Code-snippet:

The following example shows how to display additional values in tooltip for javascript column chart.

var data = [{ x: 'GBR', y: 27, tooltipMappingName: 'Great Britain', tooltipMappingName1: 'Gold', }];
var chart = new ej.charts.Chart({
tooltip: { enable: true, format: "<b>${point.x} : ${point.y} (${point.tooltip})(${point.tooltip})</b>" },
series: [
   {
     tooltipMappingName: 'tooltipMappingName',
     dataSource: data,
   },
 ],
tooltipRender(args)  {
           args.text = args.text.replace('${point.tooltip}',                  args.series.dataSource[args.point.index].tooltipMappingName1);
},
});

The following screenshot illustrates the output of the above code snippet

View Sample in Stackblitz