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.

http://jsfiddle.net/3utat/8/

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

Popular posts from this blog

c# - Send Image in Json : 400 Bad request -

jquery - Fancybox - apply a function to several elements -

An easy way to program an Android keyboard layout app -