Pashok
Pashok

Reputation: 125

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

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="chart_1" class="chart"></div>

Upvotes: 1

Views: 481

Answers (1)

magdalena
magdalena

Reputation: 3703

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

Upvotes: 1

Related Questions