CODEWITHSUNDEEP
javascriptanimationhighchartsmapstransition
darektoa
darektoa

Reputation: 35

Add Series Transition/Animation in Highchart Maps

Maps transition with Higchart Maps

Is it possible to add transitions/animations like the GIF image above when colorAxis.dataClasses/legends and series change using Highchart Maps?

I have tried this option, but it only works scale animation, not color.

plotOptions: {
    series: {
        allAreas: true,
            animation: {
                duration: 1000,
                easing: 'easeOutBounce'
        },
    },

    ...
}

FYI: I'm using React.js, with highcharts and highcharts-react-official libraries

I really hope to get the answer. Thank you in advance for all the responses and answers given. 😊

Upvotes: 1

Views: 291

Answers (1)

hubertk
hubertk

Reputation: 199

To achieve animation during the update all you need to use is colorAxis.update method with the redraw flag set to true. You can check it in the demo below.

Live demo: https://codesandbox.io/s/highcharts-react-demo-forked-m1ectd API Reference: https://api.highcharts.com/class-reference/Highcharts.ColorAxis#update

Upvotes: 1

Related Questions