I am using highcharts to in my app and want to add tooltip with thousand separator like I did it in data labels. I used custom formatting for tooltip, so what should I change to achieve this
tooltip options in highcharts
tooltip: {
formatter: function () {
return (this.x + ':' + this.y);
},
shared: true,
useHTML: true
},
JS FIDDLE
Use Highcharts.numberFormat()
in point.x or point.y
example:
tooltip: {
enabled: true,
split: true,
shared: true,
formatter: function () {
// The first returned item is the header, subsequent items are the points
return [Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x)].concat(
this.points
? this.points.map(function (point) {
return (
point.series.name +
": " +
// numberFormat(data, decimal)
Highcharts.numberFormat(point.y, 2)
);
})
: []
);
},
},
Just following Nishith Kant Chaturvedi's answer, and since there is no jsfiddle example available, here you can see how to implement that answer.
Highcharts.setOptions({
lang: {
decimalPoint: '.',
thousandsSep: ','
}
});
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: ''
},
xAxis: {
categories: ['Salary']
},
yAxis: {
title: {
text: ''
},
stackLabels: {
enabled: true,
format: '{total:,.2f} $us'
},
labels: {
format: "{value:,.2f} $us",
}
},
legend: {
backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
borderColor: '#CCC',
borderWidth: 1,
},
tooltip: {
headerFormat: '<b>{point.x}</b><br/>',
pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
},
plotOptions: {
column: {
stacking: 'normal',
dataLabels: {
format: '{point.y:,.2f} $us',
enabled: true,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
}
}
},
series: [{
type: 'column',
name: 'Tomas',
data: [60000]
}, {
type: 'column',
name: 'Amy',
data: [18000]
}, {
type: 'column',
name: 'Jenny',
data: [85000]
}]
});
http://jsfiddle.net/zrc5skLy/
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