Toggle Chart Type Not Rendering Correctly In All Cases

[wergeld]

Expected behaviour

When changing chart type from packedbubble to bar then back to packedbubble the chart should look as it did on initial load of the packedbubble.

Actual behaviour

When you change back to initial chart type the chart group width appears to be clipped so the packedbubble is cut off.

Live demo with steps to reproduce

https://jsfiddle.net/8sLhjptq/3/

Use export menu and click on "Switch chart", This changes the chart from initial packedbubble to bar.
Click on "Switch chart" again and this changes the chart back to packedbubble. Note that chart is clipped on the right.

Product version

HighCharts 11.2

Worked under HighCharts v9

Affected browser(s)

All

[karolkolodziej]

Hi @wergeld!

Thank you for reporting the issue!

Internal note:

• Simplified demo: https://jsfiddle.net/BlackLabel/fxvoz8qp/
• Initial series clip-path:
  
• The clip-path after two updates:
  
• v11.0.1 is the last working one
• It looks like the height/width is mixed up somewhere but I could not bisect.

[wergeld]

Simpler version:
https://jsfiddle.net/paczr79e/

Going from initial state of chart type = bar to packedbubble shows same behavior. Does not require 2 toggles.

[TorsteinHonsi]

v11.0.1 is the last working one

@karolkolodziej You sure? I get the clipped plot area all the way back to v7 when packed bubbles were introduced: https://jsfiddle.net/highcharts/shwnyceo/

[karolkolodziej]

@TorsteinHonsi You are right. With the simplified demo from @wergeld, I see the issue from the version where packedbubble was introduced.
A visible improvement was only visible with my demo.

[hubertkozik]

From my really short investigation, it seems, that this issue is related to the inverted chart, which is not working with the packedbubble series. Click the button, to change chart between inverted and non-inverted.
Live demo: https://jsfiddle.net/BlackLabel/5sy6x8fc/

As a workaround, after series update, you can also update the chart and make it non-inverted.
Workaround: https://jsfiddle.net/BlackLabel/1yLuqdmg/

[hubertkozik]

Other workarounds if you want to update chart.type first and then update series. If you want to use this workaround in your project simply copy-paste the IIFE function.

Workaround simplified demo: https://jsfiddle.net/BlackLabel/4sf21a0c/
Workaround demo from first post: https://jsfiddle.net/BlackLabel/7cpds5v8/

[wergeld]

That does solve the chart "clipping" issue. However, notice that the dataLabels are not aligned after toggling back:
https://jsfiddle.net/BlackLabel/7cpds5v8/

[hubertkozik]

@wergeld This is a different issue #20120, which is already fixed on master branch: https://jsfiddle.net/BlackLabel/L0dzwb96/

[wergeld]

@hubertkozik Excellent. We will wait for next release with both of these fixes in place.