Highchart Plotline Can Have Move Animation?

Is there any method that allows plotline to move to a new position with animation? Or do I have to use another plugin? I want to build like a binaryoption or expertoption game for

Solution 1:

You can use animate function, which allows you to move SVG element smoothly. Set a translateY parameter as a difference between previous and current position of y (toPixels converts value to pixels).

load: function() {

      // set up the updating of the chart each secondvar series = this.series[0],
        hasPlotLine = false,
        $button = $('#button'),
        chart = $('#container').highcharts(),
        yAxis = chart.yAxis[0],
        plotLine,
        d,
        newY;

      yAxis.addPlotLine({
        value: 50,
        color: 'red',
        width: 2,
        id: 'plot-line-1'
      });

      setInterval(function() {

        var x = (newDate()).getTime(), // current time
          y = Math.round(Math.random() * 100);
        series.addPoint([x, y], true, true);

        plotLine = yAxis.plotLinesAndBands[0].svgElem;
        d = plotLine.d.split(' ');

        newY = yAxis.toPixels(y) - d[2];

        plotLine.animate({
          translateY: newY
        }, 300);


      }, 1000);
    }

Example:

• http://jsfiddle.net/kttfv1h3/