Format tooltips in Highcharts

Question

I use tooltip.pointFormat to render additional data in a tooltip. Unfortunately, only point.x correctly formatted using the thousandth separator.

jsFiddle

 $(function () { Highcharts.setOptions({ global: { useUTC: false, }, lang: { decimalPoint: ',', thousandsSep: '.' } }); $('#container').highcharts({ xAxis: { type: 'datetime' }, tooltip: { pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count}</b><br/>', shared: true }, series: [{ data: [{ y: 20009.9, count: 20009.9 }, { y: 10009.9, count: 20009.9 }, { y: 40009.9, count: 20009.9 }], pointStart: Date.UTC(2010, 0, 1), pointInterval: 3600 * 1000 // one hour }] }); }); 

Answer 1

Found the answer here .

Numbers are formatted by a subset of the floating-point formatting conventions from the C library of the sprintf library. Formatting is added inside variable brackets, separated by a colon. For instance:

• Two decimal places: " {point.y:.2f} "
• Thousands of delimiters, without decimals: {point.y:,.0f}
• One thousand separators, one decimal place: {point.y:,.1f}

Thus, using :,.1f inside the brackets will correctly format the number.

 tooltip: { pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>', shared: true } 

jsFiddle

Answer 2

Instaed of pointFormat, use the prompt formula and then Highcharts.numberFormat

 tooltip: { formatter:function(){ return this.point.series.name + ': <b>' + Highcharts.numberFormat(this.point.options.count,1,',','.') + '</b><br/>' + 'Count: <b>'+Highcharts.numberFormat(this.point.y,1,',','.')+'</b><br/>'; } }, 

Example: http://jsfiddle.net/8rx1ehjk/4/

Answer 3

In our case, tooltipFormatter applies the format only for the y property, I found a couple of ways how to add the format not only for y ,

• add a format for each tooltip and for each property such as point.count:,.f

   pointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>', 

• create a small extension like this

   (function (Highcharts) { var tooltipFormatter = Highcharts.Point.prototype.tooltipFormatter; Highcharts.Point.prototype.tooltipFormatter = function (pointFormat) { var keys = this.options && Object.keys(this.options), pointArrayMap = this.series.pointArrayMap, tooltip; if (keys.length) { this.series.pointArrayMap = keys; } tooltip = tooltipFormatter.call(this, pointFormat); this.series.pointArrayMap = pointArrayMap || ['y']; return tooltip; } }(Highcharts)); 

Example