html - Highcharts stacked column highlight -
in highcharts stacked column, if click 1 column how highlight whole of clicked column instead of 1 block of column?
i can highlight 1 block of selected column cannot highlight whole column. this(to black whole not 1 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 }]
you can catch mouseover / mouseout evenets , use loop find point in other series same x value. use setstate() function allows 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(''); } }
Comments
Post a Comment