It is currently Wed Oct 17, 2018 9:23 pm Advanced search

Centring and wrapping datalabels in a Pyramid

Technical support, bug reports and more.

Centring and wrapping datalabels in a Pyramid

Postby jane » Thu Oct 04, 2018 3:31 pm

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
jane
 
Posts: 14
Joined: Fri Aug 17, 2018 11:57 am

Re: Centring and wrapping datalabels in a Pyramid

Postby rafalS » Fri Oct 05, 2018 12:18 pm

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 Developer
rafalS
 
Posts: 401
Joined: Thu Jun 14, 2018 1:40 pm

Re: Centring and wrapping datalabels in a Pyramid

Postby jane » Fri Oct 05, 2018 12:28 pm

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: 14
Joined: Fri Aug 17, 2018 11:57 am

Re: Centring and wrapping datalabels in a Pyramid

Postby jane » Fri Oct 05, 2018 12:59 pm

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.
jane
 
Posts: 14
Joined: Fri Aug 17, 2018 11:57 am

Re: Centring and wrapping datalabels in a Pyramid

Postby rafalS » Mon Oct 08, 2018 1:52 pm

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 Developer
rafalS
 
Posts: 401
Joined: Thu Jun 14, 2018 1:40 pm

Re: Centring and wrapping datalabels in a Pyramid

Postby jane » Thu Oct 11, 2018 1:58 pm

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
jane
 
Posts: 14
Joined: Fri Aug 17, 2018 11:57 am

Re: Centring and wrapping datalabels in a Pyramid

Postby rafalS » Thu Oct 11, 2018 6:18 pm

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 Developer
rafalS
 
Posts: 401
Joined: Thu Jun 14, 2018 1:40 pm

Re: Centring and wrapping datalabels in a Pyramid

Postby jane » Thu Oct 11, 2018 7:00 pm

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

I'll look forward to hearing about the positioning issue :);)
jane
 
Posts: 14
Joined: Fri Aug 17, 2018 11:57 am

Re: Centring and wrapping datalabels in a Pyramid

Postby rafalS » Fri Oct 12, 2018 2:59 pm

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 Developer
rafalS
 
Posts: 401
Joined: Thu Jun 14, 2018 1:40 pm

Re: Centring and wrapping datalabels in a Pyramid

Postby jane » Fri Oct 12, 2018 4:04 pm

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

Do you think the shadow function is perhaps forcing it to redraw?
jane
 
Posts: 14
Joined: Fri Aug 17, 2018 11:57 am

Re: Centring and wrapping datalabels in a Pyramid

Postby rafalS » Fri Oct 12, 2018 5:02 pm

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 Developer
rafalS
 
Posts: 401
Joined: Thu Jun 14, 2018 1:40 pm


Return to Highcharts Usage

Who is online

Users browsing this forum: Bing [Bot] and 2 guests