Highcharts Animation - animation

Question

Is there anyway to animate each and every bubble in bubble charts one by one, from left to right and the size of the bubbles will initially be either smaller or larger and then it should grow to the actual size. Any ideas to proceed further with this requirement is highly appreciated.
/**
* A Highcharts plugin to display the tooltip in a separate container outside the chart's
* bounding box, so that it can utilize all space available in the page.
*/
(function(H) {
H.wrap(H.Tooltip.prototype, 'getLabel', function(proceed) {
var chart = this.chart,
options = this.options,
chartRenderer = chart.renderer,
box;
if (!this.label) {
this.renderer = new H.Renderer(document.body, 400, 500);
box = this.renderer.boxWrapper;
box.css({
position: 'absolute',
top: '-9999px'
});
chart.renderer = this.renderer;
proceed.call(this, chart, options);
chart.renderer = chartRenderer;
this.label.attr({
x: 0,
y: 0
});
this.label.xSetter = function(value) {
box.element.style.left = value + 'px';
};
this.label.ySetter = function(value) {
box.element.style.top = value + 'px';
};
}
return this.label;
});
H.wrap(H.Tooltip.prototype, 'getPosition', function(proceed, boxWidth, boxHeight, point) {
var chart = this.chart,
chartWidth = chart.chartWidth,
chartHeight = chart.chartHeight,
pos;
point.plotX += this.chart.pointer.chartPosition.left;
point.plotY += this.chart.pointer.chartPosition.top;
// Temporary set the chart size to the full document, so that the tooltip positioner picks it up
chart.chartWidth = $(document).width();
chart.chartHeight = $(document).height();
// Compute the tooltip position
pos = proceed.call(this, boxWidth, boxHeight, point);
// Reset chart size
chart.chartWidth = chartWidth;
chart.chartHeight = chartHeight;
return pos;
});
/**
* Find the new position and perform the move. This override is identical
* to the core function, except the anchorX and anchorY arguments to move().
*/
H.Tooltip.prototype.updatePosition = function(point) {
var chart = this.chart,
label = this.label,
pos = (this.options.positioner || this.getPosition).call(
this,
label.width,
label.height,
point
);
// do the move
this.move(
Math.round(pos.x),
Math.round(pos.y || 0), // can be undefined (#3977)
point.plotX + chart.plotLeft - pos.x,
point.plotY + chart.plotTop - pos.y
);
};
}(Highcharts));
var chart = new Highcharts.Chart({
chart: {
height: 500,
renderTo: 'container',
type: 'pie'
},
tooltip: {
formatter: function() {
return '<div class="MyChartTooltip">test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> test<br /> </div>';
}
},
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]
}]
});

Answer 1

You can add point with small z values and then update them one by one asynchronously (after the one point is updated, update the next one)
You can also override bubble.prototype.animate function and change default animation-like this:
Highcharts.seriesTypes.bubble.prototype.animate = function(init) {
var H = Highcharts
var each = H.each
var animation = this.options.animation;
var points = this.points
var animatePoint = i => {
var point = points[i]
var graphic = point && point.graphic
var animationTarget
if (graphic && graphic.width) {
animationTarget = {
x: graphic.targetX,
y: graphic.targetY,
width: graphic.targetWidth,
height: graphic.targetHeight
}
graphic.animate(animationTarget, animation, () => {
animatePoint(i + 1)
});
} else {
this.update({ dataLabels: { enabled: true }})
}
}
if (!init) { // run the animation
each(points, function(point) {
var graphic = point.graphic,
animationTarget;
if (graphic && graphic.width) { // URL symbols don't have width
graphic.targetWidth = graphic.width
graphic.targetHeight = graphic.height
graphic.targetX = graphic.x
graphic.targetY = graphic.y
// Start values
graphic.attr({
x: point.plotX,
y: point.plotY,
width: 1,
height: 1
});
}
});
animatePoint(0)
// delete this function to allow it only once
this.animate = null;
}
}
example: http://jsfiddle.net/hpk497hb/