Tooltip Hover State - hover

Question

I've overridden the color of a bar in a bar chart by acting directly on the graphic. It works on initial load, but if I hover over the bar to display the tooltip, when I mouseout, it reverts to the default color, not my custom choice.
How would I edit the settings for that event on just the one bar.
See:
http://jsfiddle.net/WQkeQ/4/
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: 0,
max:4000,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
formatter: function() {
if(this.y > (this.series.chart.yAxis[0].max))
return this.series.name +': '+ this.y + ' max is smaller: '+this.series.chart.yAxis[0].max ;
else
return this.series.name +': '+ this.y;
}
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
credits: {
enabled: false
},
series: [{
name: 'Year 2008',
data: [973, 914, 4054, 732, 34]
}]
},function(chart){
var max = chart.yAxis[0].max,
content = '<h2>Points</h2><br/>';
$.each(chart.series,function(i,serie){
$.each(serie.data,function(j,data){
if(data.y > max){
content += 'Point: '+data.y+' is bigger than max: '+max;
data.graphic.attr({fill:'silver'});}
});
});
$('#report').html(content);
});
});
});
Hover over silver bar.
Thanks,
Manisha

Answer 1

Manisha, You can use CSS property for elements to set the color for the single bar in the series.
use
data.graphic.css({color: 'silver' });
instead of
data.graphic.attr({fill:'silver'});
Fiddled Version.
Hope this helps.