How can I change opacity of not hovered columns on highchart?

Question

Is that possible to change the opacity of not hovered points in Highcharts, without change the default opacity?

I have this columns charts with opacity: 1 for all columns by default. But I want to set all columns with opacity: 0.3, except the hovered one, when user hover a column, like in this example:

Chart without hover in any column:

Chart with hover:

Here is the code:

Html:

    this.graphic = Highcharts.chart('graph-roa', {
      chart: {
        zoomType: 'xy',
        marginTop: 20
      },
      title: {
        text: undefined
      },
      credits: {
        text: '',
        href: ''
      },
      xAxis: [{
        categories: ['13/07','14/07','15/07','16/07','17/07','20/07', '21/07']
      }],
      yAxis: [
        {
          lineWidth: 1,
          gridLineWidth: 0,
          labels: {
            formatter() {
              return this.value;
            },
            style: {
              color: Highcharts.getOptions().colors[1]
            }
          },
          title: {
            align: 'high',
            offset: 3,
            text: 'Reais',
            rotation: 0,
            y: -10
          }
        },
        {
          title: {
            text: ''
          },
          labels: {
            format: '',
            style: {
              color: '#fff'
            }
          },
          opposite: true
        }
      ],
      tooltip: {
        shared: true,       
      },
      legend: {
        layout: 'vertical',
        align: 'left',
        x: 700,
        verticalAlign: 'top',
        y: 10,
        floating: true,
        backgroundColor: ('#000' && '#fff') || 'rgba(255,255,255,0.25)'
      },
      series: [{
        name: 'Valor',
        type: 'column',
        color: '#106D98',
        data: [20,60,40,100,20,20,20],
        cursor: 'pointer',        
      }]
    });
  

.graph {
  // width: auto;
  height: 180px;
  display: block;
  margin-top: 20px;
}

.demais-dados-roa {
  font-family: $tt-norms-regular;
  font-size: 14px;
  margin-bottom: 2em;
  .label {
    color: $sec-5;
  }

<script src="https://code.highcharts.com/highcharts.js"></script>
<div class="row demais-dados-roa justify-content-between atual no-gutters">
    <div class="col-auto">
        <h3 class="graphic-title">
          Repasse Esc.
        </h3>
        <em class="fas fa-info-circle" (click)="tooltipVisible = true"></em>
    </div>
    <div class="col-auto">
      <div class="row no-gutters">
        <h3 class="graphic-title ml-auto">
          1,50k
        </h3>
      </div>
      <div class="row no-gutters">
        <p class="label">
          Acum. Julho
        </p>
      </div>
    </div>
</div>
<div id="graph-roa" class="graph"></div>

Answer 1

You can achieve it by using the mouseOver and mouseOut callbacks to changes the opacity of the points.

Demo: https://jsfiddle.net/BlackLabel/1srupnxk/

point: {
  events: {
    mouseOver() {
      let series = this.series;

      series.points.forEach(p => {
        p.graphic.css({
          opacity: 0.3
        })
      })

      this.graphic.css({
        opacity: 1
      })
    },
    mouseOut() {
                let series = this.series;

      series.points.forEach(p => {
        p.graphic.css({
          opacity: 1
        })
      })
    }
  }
},

API: https://api.highcharts.com/highcharts/series.column.point.events.mouseOver

Answer 2

Here's the code.

The idea is:

1. .outer:hover > * { opacity: 0.4; } here all the red items are slightly faded on hover.
2. Now .outer:hover > *:hover is to style the current item that is hovered.

.outer {
    display: inline-block;
}

.inner {
  height: 100px;
  width: 20px;
  background: red;
  display: inline-block;
  margin-right: 10px;
}

.outer:hover > * {
  opacity: 0.4;
}

.outer:hover > *:hover {
  transform: scale(1.1);
  opacity: 1;
}

<div class="outer">

  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>

</div>