farooq ahmed farooq ahmed - 4 months ago 22
HTML Question

Customize tool tip in highchart

I want to customize the tooltip functionality in HighChart.
I have a bar chart and on hover the tooltip is showing only one value right now, but I wanted to show three value.

Below is my code :

$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: ''
},
subtitle: {

},
xAxis: {
categories: ['Question\'s'],
title: {
text: ''
}
},
yAxis: {
min: 0,
title: {
text: 'Average Scores',

},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ''
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: 10,
y: -10,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'My Issue',
data: [5.4]
// want to add some value here to display
}, {
name: 'My Knowledge',
data: [8.2]
// want to add some value here to display
}, {
name: 'My Friendliness',
data: [7]
// want to add some value here to display
},
{
name: 'My time',
data: [6]
// want to add some value here to display
},
{
name: 'Z Score',
data: [9]
// want to add some value here to display
}
]

});
});


Js fiddle : http://jsfiddle.net/bu5fs1Lj/2/

Answer

You can use chart.tooltip.options.formatter like:

chart.tooltip.options.formatter = function() {
    var xyArr=[];
    $.each(this.points,function(){
        xyArr.push('Serie: ' + this.series.name + ', ' +'X: ' + this.x + ', Y: ' +this.y);
    });
    return xyArr.join('<br/>');
}

Here's a fiddle

Here is more info on formating tooltips

Comments