highchart threshold color with live updating series -


i'm trying apply new threshold/negativecolor features of highcharts v3.0.2 'spline updating each second' example.

during animation of chart updating, i'm seeing weird artifacts in series line - looks it's animating different set of control points.. , snaps correct configuration when animation (of new data point coming in) done.

commenting out threshold/negativecolor features makes visual artifact go away.

am seeing bug?

update: i'm posting following code example, stock highcharts demo (my local jquery v1.10.2) threshold/color/negativecolor lines (first lines under series) added me. code seemingly misbehaves.

<html> <head> <script src="js/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script> <script src="http://code.highcharts.com/modules/exporting.js"></script>  <script> $(function () {     $(document).ready(function() {         highcharts.setoptions({             global: {                 useutc: false             }         });          var chart;         $('#container').highcharts({             chart: {                 type: 'spline',                 animation: highcharts.svg, // don't animate in old ie                 marginright: 10,                 events: {                     load: function() {                          // set updating of chart each second                         var series = this.series[0];                         setinterval(function() {                             var x = (new date()).gettime(), // current time                                 y = math.random();                             series.addpoint([x, y], true, true);                         }, 1000);                     }                 }             },             title: {                 text: 'live random data'             },             xaxis: {                 type: 'datetime',                 tickpixelinterval: 150             },             yaxis: {                 title: {                     text: 'value'                 },                 plotlines: [{                     value: 0,                     width: 1,                     color: '#808080'                 }]             },             tooltip: {                 formatter: function() {                         return '<b>'+ this.series.name +'</b><br/>'+                         highcharts.dateformat('%y-%m-%d %h:%m:%s', this.x) +'<br/>'+                         highcharts.numberformat(this.y, 2);                 }             },             legend: {                 enabled: false             },             exporting: {                 enabled: false             },             series: [{                 threshold: 0.5,                 color: '#ff0000',                 negativecolor: '#00ff00',                 name: 'random data',                 data: (function() {                     // generate array of random data                     var data = [],                         time = (new date()).gettime(),                         i;                      (i = -19; <= 0; i++) {                         data.push({                             x: time + * 1000,                             y: math.random()                         });                     }                     return data;                 })()             }]         });     });  }); </script> </head>  <body> <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> </body> </html> 

indeed looks bug, reported here. @ moment can disable animations.


Comments