Pie chart label changes in 2.1.6

[davegster]

Hi all,

I've just been testing the 2.1.6 release before upgrading our production system (currently using 2.1.5) and noticed that our pie charts no longer render labels.

I did note in the 2.1.6 release notes that the pie chart label positioning code had been rewritten, and that positioning of pie chart labels had been discussed before (http://highslide.com/forum/viewtopic.ph ... 85&p=49211), though I'm a relative novice when I comes to delving into the Highcharts library code.

I've attached some screenshots, showing how the labels were rendered under 2.1.5, then how they are no longer rendering under 2.1.6 - exact same chart code is used, the only difference being the change in library version. I did try adjusting the 'distance' parameter, and found that once it gets to about 80, some of the labels start to show up. If I keep increasing that distance to 100+ more labels start to show (some are still missing) but they start to render outside of the visible area for the chart.

Any thoughts/suggestions as to what options I can play with to keep the labels as close to how they were rendered in 2.1.5?

Cheers
Dave

[calousy]

Hi,
I can confirm this issue. It seems the more pie pieces you have the better is the chance the labels are shown. E.g. if i have 2 pieces, it's never shown, with 7 it is.
I did not manipulate the distance.

[TioFu]

I have got the same issue. In addition, I can say that if I have a data with a low value (i.e below 5 in a discrete universe between 0 and 30), the probability of the label being displayed drops sharply.

[davegster]

Thanks for the responses, I'm a little reassured that at least it's not just me having this issue. Can someone confirm if this is a bug or expected behaviour in 2.1.6? From my point of view, it's a fairly significant bug as it renders much of our reporting system unusable when labels are not visible.

I'm happy to stay on 2.1.5 for now, as it's currently meeting our needs, but a little frustrated that I might not be able to take advantage of future releases and updates after convincing the guys with the moneybags to purchase a licence based on the presentation of the demos I put to them.

If someone from Highsoft could help explain how the labelling system changed in 2.1.6 and the reasoning behind the changes, I might be able to approach my pie chart code a little differently.

[eolsson]

I've just opened a bug report for this (https://github.com/highslide-software/h ... issues/304)

davegster, can you share the configuration code for your chart? I will then update the issue with correct repro-steps
/Erik

[TioFu]

I can post my code here if that's the case, but I use some Rails code, so it might not worth it.

[eolsson]

Oh, sorry, not the Rails code. I'm referring to the javascript configuration object that specifies chart options and such.

Maybe you could modify this jsFiddle http://jsfiddle.net/2YanB/ to show a piechart like the one in the screenshot?
/Erik

[TioFu]

Am I permitted to paste code here? Below is my code:

Code: Select all

jQuery.noConflict();


		var chart;
		jQuery(document).ready(function() {
			chart = new Highcharts.Chart({
				chart: {
					renderTo: 'container',
					plotBackgroundColor: null,
					plotBorderWidth: null,
					plotShadow: false
				},
					title: {
					text: 'Dias Dispendidos por Processo na Instituição'
				},
				subtitle: {
					text: 'Fonte: Portal Digital'
					},
				tooltip: {
					formatter: function() {
						return '<b>'+ this.point.name +'</b>: '+ (((this.y/60)/60)/24).toFixed(2) +' dia(s)';
					}
				},
				plotOptions: {
					pie: {
						allowPointSelect: true,
						cursor: 'pointer',
						dataLabels: {
							enabled: true,
							color: Highcharts.theme.textColor || '#000000',
							connectorColor: Highcharts.theme.textColor || '#000000',
							formatter: function() {
								return '<b>'+ this.point.name +'</b>: '+ this.y +' dia(s)';
							}

						}
					}

				},
			    series: [{
					type: 'pie',
					name: 'Dias Dispendidos',
					data: [["ETICE", 91], ["PROCURADORIA GERAL DO ESTADO", 112149], ["HOSPITAL INFANTIL ALBERT SABIN", 1112949]]
				}]
			});
		});


	</script>

[Aurisor]

I can confirm the same issue. It looks like the presence of whitespace in the label triggers the bug, though I did not test exhaustively.

We're rolling back to 2.1.5 until this is fixed.

[TioFu]

I can confirm the same issue. It looks like the presence of whitespace in the label triggers the bug, though I did not test exhaustively.

We're rolling back to 2.1.5 until this is fixed.

I'm afraid I will have to disagree with you. I've tested it with fixed labels, but random results, and the bug appeared sometimes. I've saved some results in a spreadsheet:

HGF SESA PGE DISPLAYED COMMENTS
34 5 4 0
18 19 4 1
32 1 4 0
16 20 4 1
39 25 4 1 PGE LABEL MISSING
43 14 4 0
36 18 4 0

Where:

HGF, SESA and PGE are the data labels. PGE is fixed value on 4, HGF and SESA are non-negative randoms less than 50. Displayed is a boolean of whether the label has shown or not. in the Comments, you see that in one of the tests, one label was missing (PGE, in the case).

[davegster]

I've just opened a bug report for this (https://github.com/highslide-software/h ... issues/304)

davegster, can you share the configuration code for your chart? I will then update the issue with correct repro-steps
/Erik

Thanks Erik,

The code in this particular case is below - I'm a fairly novice JS programmer so apologies in advance for any horrendous coding fumbles You can also see it in action at http://jsfiddle.net/2YanB/5/ (along with the missing labels)

Code: Select all

chart2 = new Highcharts.Chart({
    chart: {
        height: '520',
        width: '915',
        renderTo: 'container',
        plotBackgroundColor: null,
        plotBorderWidth: null,
        plotShadow: false
    },
    colors: ['#001F4B','#2C6DA3','#1A95D9','#8CC7E7','#00A652','#3AB54A'],
    title: {
        text: ''
    },
    tooltip: {
        formatter: function() {
            return this.point.name +': '+ this.y +' %';
        }
    },
    plotOptions: {
        pie: {
            allowPointSelect: false,
            size: '390',
            dataLabels: {
                enabled: true,
                color: '#000000',
                connectorColor: '#777',
                formatter: function() {
                    return this.point.name +': '+ this.y +'%';
                }
            }
        }
    },
    series: [{
        type: 'pie',
        name: 'Buyer origin',
        data: [1,3,6,13,14,63]
    }]
});

[dragouf]

Same issue for me.

It seems to happen just on some specific value.

[TioFu]

I guess we'll have to wait for some of the library's developer to take a look into this issue. I don't think that anyone here is making a mistake, so the problem lies within the library code.

[davegster]

Just checked on the bug entry Erik mentioned earlier (https://github.com/highslide-software/h ... issues/304), looks like they have found the issue, so I guess should be included in the next release He also posted an interim fix if you don't mind modifying the 2.1.6 library yourself.

Haven't tried it out yet myself, but will see if I get some time today.

[TioFu]

Hmm, that's good news. So let's hope they fix it fast. Thanks for the good job, guys, Highchart is a great lib, keep it coming!