Bubble Chart - splitting 'bubbles' into smaller 'bubbles'

[RJJ]

Hi,

I'm trying to achieve a unique type of animation for my Bubble chart. The effect involves breaking the 'bubbles' into smaller 'bubbles' - that are in some way related. I have been able to re-render the component when the data is changed to reflect the different series.data but the animation is not what I desire..

Does anyone have any idea of how I could achieve this desired animation?

Many thanks,

[dawid.d]

Hi,

Welcome to our forum and thanks for contacting us with your question!

For this behaviour, it's best to use a packed bubble series if you don't care about the exact position of the bubbles, just their size. You can do this by removing a bubble and adding two smaller ones in its place.

Packed Bubble Demo: https://jsfiddle.net/BlackLabel/8z1Lj0x4/

If you want to use animation in a regular bubble chart, you can use the animate method on the point graphic to move them, as in the demo below. But consider that it can be much more problematic.

Bubble Chart Demo: https://jsfiddle.net/BlackLabel/6vr2usbh/
Animate API: https://api.highcharts.com/class-refere ... nt#animate

I hope you will find it useful
Best regards!

[RJJ]

Hi, thanks for your response.

I took a look at your suggestions and although that bubble splitting animation is quite interesting, it's not quite what i'm after. I realise I was not clear enough.
The splitting effect Im looking for happens when new data is loaded into the Bubble Chart. I want the data to animate and have a 'splitting effect' - creating the appearance that the original data (a single large bubble) is mutating into different bubbles (difference sizes and positions - bi-direction functionality if possible)

For context - i'm using React.

My click handler has :
chart.series[0].update({ name: "Countries" }); // (I start with 'World' - which is a single bubble)
chart.series[0].setData(getAlternativeData(), [true], [{ duration: 2000 }]);

I'm not sure how to go about testing animation of the data1->data2 and which options or methods need to be called. I tried testing with equal sized arrays of objects but I still am unable to get animations on the data changes.

Help would be greatly appreciated.
Thanks,

[dawid.d]

Hi,

Thanks for specifying the problem!

You can use the animate method here.

Demo: https://stackblitz.com/edit/react-bubbl ... e=index.js

See the demo above, did you mean something like this?

[RJJ]

Hi,

Thanks! This is exactly the type of animation i'm trying to reproduce, however I'm having quite a few issues trying to implement this.

For starters, when running your code in my react file, I get a error thrown saying *** const parent = series.points[0] *** is undefined.
I've tried poking around to fix it but Im not sure why this error is being thrown. Has to do with the order of the data being loaded in?

Secondly, when I tried removing the load event and rather attach this functionality to a button click handler, Im getting the *** pointsToAdd.forEach((p) => {
series.addPoint(p);
});
*** addPoint() is not a function...

Im trying to set this up in a way that I can click to expand "Countries" bubbles and then hopefully click to bring it back to "World" bubble.

Do you have any other examples that you could share? (super helpful) Im logging my way through these variable object references but struggling to grasp how the chart object properties are used / exposed. For example, If I simply replace the series.data using the react state hook, at what point does the animation kick in? I've tried using events : addSeries and load to test this but can't get my head around the animation.

Many thanks again!

[dawid.d]

Hi,

It's hard to tell what's wrong without seeing your code. As for the example with the button and collapsing points, it's quite a complicated case and covering all cases is beyond the scope of support, but I prepared a demo that should help you.

Demo: https://stackblitz.com/edit/react-bubbl ... e=index.js

However, you must remember that I haven't handled many cases there, e.g. those requiring the implementation of recursion.

If I may clarify any issues/matters I am available at your convenience.
Best regards!

[RJJ]

Hi,

Thanks again for your example - very helpful!

I've made my way through the code and trying to find docs to reference at the same time. One area that I'm struggling with is the way you are handling the movement of the points when clicked.

eg. child.graphic.attr() and .animate()
Are these methods available because the graphic is a SVG element and thats how you animate its position? I don't really understand what is happening in those lines of code and cant find much documentation or other examples on the docs.
If you could provide any insight or info that I could read up on - that would be great!

Thanks again!

[dawid.d]

Hi,

You're welcome, I'm glad it's helpful!

Yes, the animate and attr methods are available for SVG elements.

The attr method sets the element's attributes in the immediate mode, animate enables a 'smooth' change, according to the animation option set (by default it is on with a fixed duration).

You can see more here:
animate: https://api.highcharts.com/class-refere ... nt#animate
attr: https://api.highcharts.com/class-refere ... ement#attr

Available attributes (only part listed): https://api.highcharts.com/class-refere ... Attributes

Best regards!

[RJJ]

Hi again,

Thanks for that - starting to get the hang of things now.

I'm curious to know your thoughts on a 'bug' that pops up every now and then - which is the chart sometimes gets set to undefined.. and throws an error when I try handle my splitBubbleHandler. It's strange because the chart.events.load function surely fires before the user can see the chart in any state. I need to refresh and then everything works.

Is setting the chart the way we do with a variable the best way to instantiate a chart? Im slightly confused with the various ways these charts can be set up. For example, using a ref or key.

Your input would be appreciated
Thanks!

[dawid.d]

Hi,

Before the chart is created, this variable is undefined, but then we are unlikely to use it. If you have such an error, it is rather enough to add a condition that checks whether the chart variable is defined before it is used.

Regards!

[RJJ]

Thanks for your help

[dawid.d]

You're welcome!
In case of any further questions, feel free to contact us again.
Best regards