Highcharts Packed Bubble Automatically Pulsate & Move

I am working with the Packed bubble chart in Highcharts and have been trying to create an effect where the individual bubbles grow and shrink plus random forces are applied so that the graph is constantly moving.

I have managed to create the base graph with the following code

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

randomInt = 300;
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '100%'
},
plotOptions: {
packedbubble: {
minSize: '5%',
maxSize: '100%',
zMin: 0,
zMax: 1000,
layoutAlgorithm: {
gravitationalConstant: 0.02,
splitSeries: false,
dragBetweenSeries: true,
parentNodeLimit: true
}
}
},
series: [
{
name: 'Vegetable',
data: [{
name: 'Breakfast',
value: 5
},
{
name: 'Lunch',
value: 5
},
{
name: 'Lunch',
value: 5
},
{
name: 'Dinner',
value: 5
}]
}, {
name: 'Fruit',
data: [{
name: 'Breakfast',
value: 5
},
{
name: 'Lunch',
value: 5
}]
}, {
name: 'Grain',
data: [{
name: 'Breakfast',
value: 5
},
{
name: 'Breakfast',
value: 5
},
{
name: 'Lunch',
value: 5
},
{
name: 'Lunch',
value: 5
},
{
name: 'Dinner',
value: 5
},
{
name: 'Dinner',
value: 5
}]
}]
});

<!-- language: lang-html -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<figure class="highcharts-figure">
<div id="container"></div>
</figure>

<!-- end snippet -->

I have attempting to set the value of each entry in series to a variable which changes over time using a simple function but the chart isn't updated to reflect these changing weightings.

To get the bubbles moving like they do when dragged I consulted the documentation here but I couldn't find any way to manually apply a force programmatically.

Highcharts has methods to dynamically update chart elements. You can use the char.update() method to update all series at once. You can also use the series.setData() method to update points for a specific series, or more precisely if you only want to update a specific point, you will achieve it by using point.update() method.

<!-- begin snippet: js hide: false console: false babel: false -->

<!-- language: lang-js -->

const chart = Highcharts.chart('container', {
chart: {
type: 'packedbubble'
},
plotOptions: {
packedbubble: {
minSize: '5%',
maxSize: '100%',
zMin: 0,
zMax: 50
}
},
series: [{
data: [5, 4, 3]
}, {
data: [4, 5]
}, {
data: [5, 5, 5, 5]
}]
});
setTimeout(function() {
chart.series[0].setData([5, 14, 3])
}, 2000);
setTimeout(function() {
chart.series[1].points[0].update({
value: 50
})
}, 4000);

<!-- language: lang-html -->

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>

<!-- end snippet -->

Demo: https://jsfiddle.net/BlackLabel/s0k7fnhx/ <BR/>
API: https://api.highcharts.com/class-reference/Highcharts.Chart#update <BR/>
https://api.highcharts.com/class-reference/Highcharts.Series#setData <BR/>
https://api.highcharts.com/class-reference/Highcharts.Point#update

Try dataLabels enabled: true

    dataLabels: {
enabled: true,
format: '{point.name}',
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}

https://jsfiddle.net/my9f382a/12/