animate addPlotBand Highcharts - highcharts

Question

Is there a way to add a plotband that has a smooth transition? Before I am using
addPlotLine and
addPlotBand
chart.yAxis[0].removePlotBand('plot-band-1');
chart.yAxis[0].removePlotLine('plot-line-1');
var x = (new Date()).getTime(), // current time
y = Math.round(Math.random() * 100);
series.addPoint([x, y], true, true);
chart.yAxis[0].addPlotBand({
from: 100000,
to: y,
color: {
linearGradient: { x1: 1, y1: 1, x2: 1, y2: 0 },
stops: [
[0, 'rgba(46, 230, 0, 0.22)'],
[1, 'rgba(46, 230, 0, 0)'] //down
]
},
id: 'plot-band-1'
});
chart.yAxis[0].addPlotLine({
value: y,
color: 'red',
width: 2,
id: 'plot-line-1'
});
to plot the point on a dynamic chart, but now I am using animate to make the plotting smoother
plotLine = yAxis.plotLinesAndBands[0].svgElem;
d = plotLine.d.split(' ');
newY = yAxis.toPixels(y) - d[2];
plotLine.animate({
translateY: newY
}, 300);
Also I am trying the solution from this Highcharts plotBand animation. however it seems that I am unable to implement it properly.
For your reference here is the code of where is used addPlotLine and addPlotBand and this is the current code style being used. Appreciate your help with this. Thank you.

Answer 1

If you pass path d attribute as an array, you can animate it as a simple shape.
Add the plotband before setiInterval and animate it as the plotline on every interval.
const plotbandPath = plotband.svgElem.d.split(' ')
plotbandPath[7] = plotbandPath[9] = newY
plotband.svgElem.animate({
d: plotbandPath
}, 300)
example: http://jsfiddle.net/sqer2x13/