CODEWITHSUNDEEP
highcharts
wkornilow
wkornilow

Reputation: 53

Don`t work animation on highcharts basic line

I have such problem on a web site, i have 3 highcharts. It`s one-page site, so my chart animated when i scroll down to him. But one chart is not animated, and i have no idea why.

This is site

And this is a source of this chart

$('#container').highcharts({
chart: {
    type: 'line'
},
title: {
    text: 'Monthly Average Temperature'
},
subtitle: {
    text: 'Source: WorldClimate.com'
},
xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
},
yAxis: {
    title: {
        text: 'Temperature (°C)'
    }
},
plotOptions: {
    line: {
        dataLabels: {
            enabled: true
        },
        enableMouseTracking: false
    },
    series: {
        animation: {
            duration: 2000
        }
    }
},
series: [{
    name: 'Tokyo',
    data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
}, {
    name: 'London',
    data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
}]

});

Do somebody know, why it might not work?

Upvotes: 0

Views: 379

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

Link to your site seems broken.

Chart itself looks and animates ok - example

From your site I see that you are using plugin to defer initial series animation until the element has appeared (https://github.com/s3rgiosan/highcharts-defer).

It looks buggy - it will block animation series of certain types like line, spline (and possibly more) unless that series is visible from the start - prove: http://jsfiddle.net/8YVUb/11/.

You could use alternative approach to defer series animation - Javascript/JQuery perform function when user scrolls near bottom of page

Example: http://jsfiddle.net/uh63w9fL/

Upvotes: 1

Related Questions