Animated Series in highchart

Question

Hi, I want to create such a high level

I created the dotted line highchart, but I don’t know how to place this animation.

$(function () {
    $('#container').highcharts({


        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            color: '#FF0000',
           dashStyle: 'dash'
        }]
    });
});

Link to my script http://jsfiddle.net/puuqbo6n/

Answer 1

CSS animation can do this by setting stroke-dashoffset@keyframes toto some negative value (assuming you want it to go from left to right) and starting the animation endlessly (assuming you want it too). The technique is mostly recognized here .

.highcharts-series path {
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: -100;
  }
}

http://jsfiddle.net/puuqbo6n/3/

, , , , .