I use tooltip.pointFormat
to render additional data in the tooltip. Unfortunately only point.x
is formatted correctly with a thousand 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
}]
});
});
Found the answer here.
Numbers are formatted with a subset of float formatting conventions from the C library funciton sprintf. The formatting is appended inside the variable brackets, separated by a colon. For example:
- Two decimal places: "
{point.y:.2f}
"- Thousands separator, no decimal places:
{point.y:,.0f}
- Thousands separator, one decimal place:
{point.y:,.1f}
So using :,.1f
inside the brackets will format the number correctly.
tooltip: {
pointFormat: '{series.name}: <b>{point.y}</b><br/>' + 'Count: <b>{point.count:,.1f}</b><br/>',
shared: true
}
jsFiddle
Instaed of pointFormat, use the tooltip formatter 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/
In our case tooltipFormatter
applies format only for y
property, I found couple ways how to add format not only for y
,
add format for each tooltip and for each property like this point.count:,.f
pointFormat: '{series.name}: <b>{point.count:,.f}</b><br/>' + 'Count: <b>{point.y}</b><br/>',
create 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With