jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

External datalabels to a pyramid

Hi,

Following on from my previous post regarding the Highcharts Pyramid, I am trying to render external labels to the pyramid in a similar way as shown in this SO answer:
https://stackoverflow.com/questions/425 ... harts?rq=1

I have updated my codepen with what I have so far:
https://codepen.io/jharri/pen/vVKRwL

At the moment I'm only attempting to render labels but I will also be adding arrows to the relevant segments too.

As you can see the labels get cut off as a result of the size of the svg. I did try manually changing the size of the svg within the drawLabels function but it didn't go well, as you can imagine - the code is there but commented out just in case it might be useful!

Any ideas?

thanks
Jane
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: External datalabels to a pyramid

Hello again, Jane,

Could you explain more precisely, what problem exactly do you have and what do you want to achieve?

My guess is that labels you have rendered do not fit into Highcharts container. Let me explain why. Let's take the widest point (bottom one). Its distance from the left edge of Highcharts container (boundingRect.left) is 47px and you try to render your label with posision x: boundingRect.left - 150 which is actually -103px (out of the container).

Let me know if I missed something and you have other issue/question ;)

Have a good day!
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: External datalabels to a pyramid

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!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: External datalabels to a pyramid

Jane,

Does your chart have to be responsive? If yes, what width chart will have on different screens and resolutions? Does it have to be 600px rigidly as it is now? If it fits your requirements, I would start with setting chart's width to 100% and then we can set point's width to 600px - we will have some space for labels.

The biggest problem is to fit a bottom label. Can you try this way?: https://codepen.io/raf18seb/pen/oaewpb
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: External datalabels to a pyramid

Hi Rafal,

Thanks for your reply and sorry for my slow response, company meeting this week has meant I have only just got back to dev.

Due to the problems with these external labels (as you correctly assumed, it does need to be responsive) I have pushed back on the design and we no longer have to cater for these labels :)
(at least until they change their mind!)

many thanks for your help

Jane

Return to “Highcharts Usage”