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

Centring and wrapping datalabels in a Pyramid

Hi!

I have a simple pyramid rendered using highcharts.

In this pyramid in each of the sections I want the datalabels to be within the sections themselves but also, if the text is too long for the width of the section the text should wrap to the next line.

Important things to note:
* I can't hard code widths to the datalabels since the size of the pyramid will be variable.
* I want to apply styling to the datalabel via css which I am doing like so:
formatter(format: any) {
// This will determine whether the font color should be black or white depending on the background color
const fontColor = Color.getFontColor(this.point.color);
return (
'<span style="color: ' +
fontColor +
'" class="datalabel">' +
this.key +
'</span>'
);
}

This seems like it should be simple to achieve but I'm drawing a blank.

FYI I have used the solution for placing the datalabels within the sections that was posted here:
https://forum.highcharts.com/post120241 ... 62#p120241

TIA

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

Re: Centring and wrapping datalabels in a Pyramid

Hello, jane!

Are you able to provide me a simplified jsFiddle demo with your chart and dataLabels I could work on? Also, could you share again a link from your previous message? That one has been cut off.

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Centring and wrapping datalabels in a Pyramid

Hi Rafal,

Yes I've just been working on creating one for you:

https://codepen.io/jharri/pen/vVKRwL

The other issues I have are to do with styling on selection. I don't want the colour to change to grey and I want to make the border wider. I think I have configured it correctly but it seems to have no affect... so I must have get it wrong somewhere!

This was the url:
https://forum.highcharts.com/post120241.html#p120241

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

Re: Centring and wrapping datalabels in a Pyramid

I also note that when a section is highlighted, unless it is the top section, then the top border isn't visible as the section above it overlaps it.
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Centring and wrapping datalabels in a Pyramid

Hi, Jane

We can calculate point's width on its SVG path and set dataLabel's width to not exceed the half of point's width.

When it comes to selected color, you were really close. In pyramid series, it's not a marker but just color of the point so it's not here series.marker.states.select.fillColor but here series.states.select.color.

CodePen: https://codepen.io/raf18seb/pen/mzOGJd?editors=1010

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Centring and wrapping datalabels in a Pyramid

Hi Rafal,

Thanks for your update, it's been useful.

However I still see an issue with the labels not being centralised and in some cases are rendering outside of the sections until after I resize the browser window, could there be a redraw issue?
Also would there be a way to centrally align the 2 lines of text to each other?

The selected colour was a great top tip, thanks. I've set this to null and it maintains the section colour, which is perfect.
I also want to change the border line to 3px but changing series.states.select.lineWidth seems to have no effect? (Even in your codepen)

Also, I notice that when a section other than the top one is highlighted then the top border isn't visible because the section above is overlapping it. Is this by design or a bug? Is there any workaround to have all sides with a border when selected?

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

Re: Centring and wrapping datalabels in a Pyramid

Jane,

referring to second and third questions, we can set borderWidth and place points on top (zIndex) like this:

Code: Select all

series: [{
          data: data,
          borderWidth: 3,
          borderColor: 'transparent',
          point: {
            events: {
              select() {
                this.graphic.toFront()
              }
            }
          },
          states: {
            select: {
              color: null,
              borderColor: 'red'
            }
          }
        }],
Also, we can apply textAlign: 'center' on dataLabels like this:

Code: Select all

p.dataLabel.css({
      textAlign: 'center'
    })
https://codepen.io/raf18seb/pen/vVZmzN?editors=0010


But we don't know (yet) why dataLabels are getting the wrong position. We need some more time to think about it - I'll let you know when we figure it out ;)

Best regards!
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Centring and wrapping datalabels in a Pyramid

ah!!! that's fantastic! thank you so much. So easy when you know how :)

I'll look forward to hearing about the positioning issue :);)
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Centring and wrapping datalabels in a Pyramid

I figured it out :idea: you will not believe when you see this workaround.

First, I needed to figure out, why the bottom label is being divided into two lines even if there is a space for text in one line. You need to set plotOptions.series.dataLabels.crop to false.

After that, I was wondering, why a label that is divided into two lines (the top one) isn't centered. The solution is... you just need to apply... empty shadow :lol:

Code: Select all

if (currentLabelWidth > pointWidth / 2) {
      p.dataLabel.css({
        width: pointWidth / 2,
      })
      p.dataLabel.shadow({})
    }
https://codepen.io/raf18seb/pen/mzMrmK?editors=0010
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Centring and wrapping datalabels in a Pyramid

WOW! now that is quite a workaround! Good find :D

Do you think the shadow function is perhaps forcing it to redraw?
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Centring and wrapping datalabels in a Pyramid

Close. In brief: shadow function is forcing to call updateBoxSize() method (which calculates correct label's width after we divide it by 2 - we need updated width instead of old one to center properly). UpdateBoxSize() method should be called inside .css({}) but for some reason it is not - that's why we need to call this method in shadow. We'll try to fix it.
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Centring and wrapping datalabels in a Pyramid

Hi there,

I still seem to be having issues with this.

If I click the "restore down" button on the browser and then manually resize the width a few times the labels (particularly the one in the widest section) seem to go off centre and the wrapping gets a bit flaky. I've tried all sorts of different calculations in the placeDataLabels function but I've drawn a blank

https://codepen.io/jharri/pen/aQJXZZ?editors=1010

Note the above codepen uses bootstrap positioning, to replicate issues we're seeing in our actual application. I'm not sure if that is contributing to the problem.

Any help you could provide would be greatly appreciated!

thanks
Jane

P.S. here is another codepen with the alternative method I tried:
https://codepen.io/jharri/pen/LXWaqv?editors=1010

I'm not sure which I feel is more reliable!
rafalS
Posts: 2665
Joined: Thu Jun 14, 2018 11:40 am

Re: Centring and wrapping datalabels in a Pyramid

Hi, Jane!

Your second codepen with your method seems working fine. The problems will occur when text is long and wider than a point, but except that, I think that your approach is quite good. Am I missing something and do you still have any questions?

Rafał
Rafal Sebestjanski,
Highcharts Team Lead
jane
Posts: 53
Joined: Fri Aug 17, 2018 9:57 am

Re: Centring and wrapping datalabels in a Pyramid

Hi Rafal,

Sometimes it doesn't *quite* work, but most of the time I think it's probably ok. On occasion I find that the labels sometimes are off centre but it is difficult to reproduce reliably.

I was also wondering about how to solve the issue of the text not fitting, particularly in that top segment. Would it be possible to be able to detect, AFTER the text has wrapped, whether the label is still too wide for the section and if so to then align it to the bottom of the section. If the text label fits, then I would want it to continue to be centrally vertically aligned.

I hope that makes sense!

thanks for your continued help Rafal

Jane

Return to “Highcharts Usage”