runfaj
Posts: 9
Joined: Thu Sep 29, 2022 11:07 pm

Bubble size based on plot area

Hi,

I tried searching on this forum already for this, but the search seems to ignore 2/3 of all the keywords I've tried. Anyway...

I have a bubble chart that currently I have a min of 8 and max of 120. (https://jsfiddle.net/37kq0pwa/) This looks fine when a chart is big, but since chart resizing is allowed in our app, it looks horrible on a small chart. I'm transitioning away from amcharts, which does seem to handle this as expected where the bubbles scale proportionally to the available plot area. Here's a couple comparisons (looking purely at the bubble sizing and not other small differences).

Image

Image

I'm not able to calculate the size based on the overall chart area because the labels and legend are all completely dynamic in the final implementation, so I won't know the heights/widths of those areas outside the plot. I've tried a couple attempts on events, which I suspect this could be addressed somehow via the chart render, but I'm not finding the correct things to handle the bubble resizing after having grabbed the plot size. I'm also noticing the sizeBy: 'area' also seems very disproportionate in comparison between the 1 & 2 values versus the other ones. Any ideas on potentially addressing both of these?

Thanks!
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Bubble size based on plot area

Hello,

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

The bubble will dynamically adapt to the width when you do not set the series.minSize and series.maxSize properties. If you want to set a non-standard size (constant value) but adjust it dynamically when changing the width of the chart, you can use the series.update(); method in the chart.events.render(); callback function.

Demo: https://jsfiddle.net/BlackLabel/d6px8cto/
API: https://api.highcharts.com/class-refere ... ies#update

Let me know if you have any further questions!
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
runfaj
Posts: 9
Joined: Thu Sep 29, 2022 11:07 pm

Re: Bubble size based on plot area

Ah, this is exactly what I was looking for and should work perfectly. Thanks!
runfaj
Posts: 9
Joined: Thu Sep 29, 2022 11:07 pm

Re: Bubble size based on plot area

For anyone in the future, in case it helps, here's what I ended up settling on for logic that looked fairly decent for many chart sizes:

Code: Select all

      let updateCycleFlag = true;

      events: {
        render() {
          if (updateCycleFlag) {
            updateCycleFlag = false;

            const chart = this;
            const { height } = chart.plotBox;

            const maxSizeAbsMin = 20;
            const maxSizeAbsMax = 100;
            const maxSizePlotHeightRatio = 0.6;
            const maxSize = Math.max(maxSizeAbsMin, Math.min(maxSizePlotHeightRatio * height, maxSizeAbsMax));

            const minSizeAbsMin = 12;
            const minSizeAbsMax = maxSizeAbsMax / 2;
            const minSizePlotHeightRatios = 0.1;

            const minSize = Math.max(minSizeAbsMin, Math.min(minSizePlotHeightRatios * height, minSizeAbsMax));

            chart.series[0].update({
              minSize,
              maxSize,
            });

            updateCycleFlag = true;
          }
        },
      },
michal.f
Posts: 1114
Joined: Thu Aug 12, 2021 12:04 pm

Re: Bubble size based on plot area

You're welcome! And thanks for sharing your code with us!

In case of any further questions, feel free to contact us again.
Best regards!
Michał Filipiec
Highcharts Developer
https://blacklabel.pl/highcharts/
torstein.honsi
Site Admin
Posts: 9215
Joined: Thu Nov 09, 2006 11:22 am
Location: Vik i Sogn, Norway

Re: Bubble size based on plot area

Note that percentages can be used for the bubble min and max sizes, in which they will be based on the size of the available plot area. I don't think the chart.update workaround above is needed, as this functionality is built in already:

https://jsfiddle.net/highcharts/8ecxp92q/
Torstein Hønsi
CTO, Founder
Highsoft

Return to “Highcharts Usage”