Hi Rafal,
So in the codepen you can see I have created a label for each section saying "Click here to explore more skills". From this label there will be an arrow to the section it's related to.
So a little like the out of the box datalabels highcharts provides except the text will always say "Click here to explore more skills", the connecting line will be a stylised arrow and the label will render alternately on the left and right (as you can see in my feeble attempt)
Here's the out of the box highcharts example I'm referring to which has a very vague resemblance to what I'm trying to achieve...
https://www.highcharts.com/demo/pyramid
I've tried the following:
1. removing all width restrictions on the div container - in this scenario the pyramid expands width ways, appearing stretched, and the labels still render outside of the highcharts container (as you rightly say in your reply).
2. I've tried adding chart.spacing/chart.margin on the chart to give room for the external labels but then the pyramid becomes very narrow... plus I will then have issues with putting the required labels within the sections
I think basically the issue is this... the chart renders, which decides how large the svg should be. Then after it has rendered I call my drawLabels function which adds the external labels but there isn't really enough space for them. So my question is, how can I get the chart and the external labels to all fit within the svg?
thanks for all your help!