Apexcharts: Changing opacity of squares when mouseover a series label (:: hover)

Question

I have a heatmap chart using apex-charts (https://apexcharts.com/react-chart-demos/heatmap-charts/).

When i mouseover a series label (1) the color stays the same (2) and change opacity of the others series (3).

I would like to change the opacity of other series (3) way lower, something like 5% of opacity. How i can change that using apex-charts?

Answer 1

The CSS responsible for rendering "other series (3)" is:

.legend-mouseover-inactive {
  transition: .15s ease all;
  opacity: .2;
}

To change the opacity to 5% use:

.legend-mouseover-inactive {
  opacity: .05;
}

Here's a working example.