Search code examples
javascriptcssreactjschartsapexcharts

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

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

picture

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?

Solution

  • 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.