Reputation: 41
In highcharts stacked column, if I click one column how could I highlight the whole of the clicked column instead of only one block of the column?
I can highlight only one block of selected column but cannot highlight the whole column. Just like this(to black the whole not only one block):Stacked column highlight
xAxis: {
categories: ['One', 'Two', 'Three', 'Four', 'Five']
},
plotOptions: {
column: {
stacking: 'normal'
},series: {
cursor: 'pointer',
point: {
events: {
click: function(e) {
this.update({ color: 'black' }, true, false)
}
}
}
}
},
series: [
// first stack
{
data: [29.9, 71.5, 106.4, 129.2, 144.0],
stack: 0
}, {
data: [30, 176.0, 135.6, 148.5, 216.4],
stack: 0},
// second stack
{
data: [106.4, 129.2, 144.0, 29.9, 71.5],
stack: 1
}, {
data: [148.5, 216.4, 30, 176.0, 135.6],
stack: 1
}]
Upvotes: 4
Views: 1997
Reputation: 37578
You can catch mouseOver / mouseOut evenets and use loop to find point in other series with the same x value. Then use setState() function which allows to set i.e hover.
events: {
mouseOver: function () {
console.log(this);
var indexS = this.series.index,
indexP = this.x,
series = this.series.chart.series;
switch (indexS) {
case 0:
series[1].data[indexP].setState('hover');
break;
case 1:
series[0].data[indexP].setState('hover');
break;
case 2:
series[3].data[indexP].setState('hover');
break;
case 3:
series[2].data[indexP].setState('hover');
break;
}
},
mouseOut: function () {
var indexS = this.series.index,
indexP = this.x,
series = this.series.chart.series;
series[1].data[indexP].setState('');
series[0].data[indexP].setState('');
series[3].data[indexP].setState('');
series[2].data[indexP].setState('');
}
}
Upvotes: 2