How to hide only the columns of this group when hovering over a group column in highcharts?

Question

By default, hover hides all other columns in all groups. How can I make it so that only the columns in that group are hidden on hover? I found the hover event in the documentation, and getting the column (upper left), but how to hide it with it? Maybe through tooltip somehow?

My question in original view.

An example of how it works now:

Example how to:

chart1 = new Highcharts.Chart({
 chart: {
    renderTo: 'chart_1',
    type: 'column',
    height: 350,
 },

 title: {
    text: 'Some text'
 },
 xAxis: {
    categories: ['Processing.js', 'Impact.js', 'Other', 'Ease.js', 'Box2D.js', 'WebGL', 'DOM', 'CSS', 'Canvas', 'Javascript']
 },
 yAxis: {
    title: {
       text: 'Title y'
    }
 },
 /*tooltip: {
   shared: true,
   split: true,
 },*/
 plotOptions: {
   series: {
            point: {
              events: {
                mouseOver: function() {
                  var chart = this.series.chart;
                  if (!chart.lbl) {
                        chart.lbl = chart.renderer.label('')
                            .attr({
                                padding: 10,
                                r: 10,
                                fill: Highcharts.getOptions().colors[1]
                            })
                            .css({
                                color: '#FFFFFF'
                            })
                            .add();
                    }
                    chart.lbl
                        .show()
                        .attr({
                            text: 'x: ' + this.x + ', y: ' + this.y
                        });
                }
              }
            },
            events: {
                mouseOut: function (){
                    if (this.chart.lbl) {
                        this.chart.lbl.hide();
                    }
                }
            }
        },
        column: {
          groupPadding: 0.1,
          pointPadding: 0.1,
          borderWidth: 0,
          events: {
            mouseOver: function() {
              console.log("1");
            }
          }
        }
 },
 series: [{
    name: 'Dev #1',
    data: [5, 10, 20, 22, 25, 28, 30, 40, 80, 90]
 }, {
    name: 'Dev #2',
    data: [15, 15, 18, 40, 30, 25, 60, 60, 80, 70]
 }, {
    name: 'Dev #3',
    data: [1, 3, 6, 0, 50, 25, 50, 60, 30, 100]
 }]
});

.actions, .chart {
    margin: 15px auto;
    width: 820px;
}

user_10601917 · Answer

To achieve that, at first you need to set the opacity to 1 for inactive series and disable hover.

  plotOptions: {
    series: {
      states: {
        inactive: {
          opacity: 1
        },
        hover: {
          enabled: false
        }
      },

Then, use the mouseOver and mouseOut point events to find the points with the same category as the hovering one, and to update them with new opacity.

point: {
    events: {
      mouseOver: function() {
        var point = this,
          chart = point.series.chart,
          allSeries = chart.series,
          category = point.category;
        allSeries.forEach(series => {
          series.points.forEach(point => {
            if (point.category === category) {
              point.update({
                opacity: 0.2
              }, false)
            }
          })
        })
        chart.redraw()
      },
      mouseOut: function() {
        var point = this,
          chart = point.series.chart,
          allSeries = chart.series,
          category = point.category;
        allSeries.forEach(series => {
          series.points.forEach(point => {
            point.update({
              opacity: 1
            }, false)
          })
        })
        chart.redraw()
      }
    }
  }

Demo: https://jsfiddle.net/BlackLabel/5Lcn6d8e/

API References: https://api.highcharts.com/highcharts/plotOptions.series.events.mouseOver https://api.highcharts.com/class-reference/Highcharts.Point#update

How to hide only the columns of this group when hovering over a group column in highcharts?

1 Answers