CSS styling hover transition

[littlerave]

Hello,

I'm using a custom Highcharts map inside an Angular application with Angular Material styling, thus I want to set the colours of the map according to the material theme's colours. So I've set styledMode to true and applied the following css rules:

Code: Select all

.highcharts-point {
    fill: green;
    transition: fill .2s linear;

    &.highcharts-point-hover {
        fill: red;
    }
}

The colors are set depending on whether I hover over a path. However, the transition is not working. If I use

Code: Select all

.highcharts-point:hover

instead of the

Code: Select all

.highcharts-point-hover

class, then the transition is working, but only when I move the cursor onto the path. There is still no exit transition. If I just use Chrome's developer tools and activate the hover rule, then the transition is working (with both the pseudo selector and the highcharts hover class), in both directions. Since highcharts seems to meddle with the DOM by reodering the paths, I assume that also messes with the transitions.

How can I get the hover transitions to work?

[michal.f]

Hello,

Could you reproduce this in an online demo? For example based on this: https://stackblitz.com/edit/highcharts- ... mponent.ts

What version of Angular and wrapper are you using?

Best regards!

[littlerave]

Thank you for your reply.

I'm using Angular 14.1.0, Highcharts 10.3.1 and Highcharts-Angular 3.0.0. As requested I've modified the stackblitz example to showcase the issue: https://stackblitz.com/edit/highcharts- ... ine-o4nn4x

[sebastian.h]

Thanks for the message and example,

After investigation it looks like a bug, CSS animation doesn't appear in the output for the specified data points.
You can follow the GH ticket and add more details if it's needed, at this link:
https://github.com/highcharts/highcharts/issues/18394

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


Best regards