Pie with long dataLabels with useHTML: true wrongly rendered

[KacperMadej]

Behaviour

In a pie chart with dataLabels having useHTML set to true, if labels string creates a new element (e.g. div) then cropping is not working correctly (no ellipsis) and long labels are making the pie move out of center - point could be pushed out of plot area.

Live demo with steps to reproduce

https://jsfiddle.net/BlackLabel/pb1az94h/1/

[sebastianbochan]

Im not sure if it is a bug.

By default, the ellipsis are applied on direct datalabels div (which does not have content like text, directly). When you use extra div, it does not inherit parent's styles. As a result ellipsis is not visible. Apply CSS styles and then will be visible.

.highcharts-data-label span div {
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
}

Demo:

• https://jsfiddle.net/BlackLabel/bLrujcfa/

Internal note
I remember long discussion about it, but cannot find at this moment.

@TorsteinHonsi @KacperMadej what do you think?

[TorsteinHonsi]

I'm not sure either, but in general it's a bad omen that it behaves differently depending on useHTML.

[KacperMadej]

Looks like a problem with a lack of inheritance, but this is how a div works by default, so missing style is caused by setting this HTML structure. inherit works too.

I have reported this on behalf of a client, so I'll let them know about the possible solution.

[writetonsharma]

Thank you for looking. I changed the way you suggested and it improved it. I viewed it on a phone in portrait and the problem is there. Landscape looks good. Uploaded the sample here -
http://writetonsharma.github.io/Intesa_EstrattoContoNoRoundedCorner/Output/Intesa_ECI_Responsive.html
Look for text "Riepilogo macro spese del conto corrente" and expand it to see the chart.
Did I do what you suggested ?

Thanks.

[KacperMadej]

Minimal demo: https://jsfiddle.net/BlackLabel/bLrujcfa/4/
I'll debug / investigate the problem. Looks like width should be set as 0, but is not set at all.

[KacperMadej]

This is caused by trying to set negative width for an element in this code:

highcharts/js/parts/DataLabels.js

Lines 1221 to 1236 in 7f0ce96

	// Shorten data labels with ellipsis if they still overflow
	// after the pie has reached minSize (#223).
	if (dataLabel.sideOverflow) {
	dataLabel._attr.width =
	dataLabel.getBBox().width - dataLabel.sideOverflow;
	dataLabel.css({
	width: dataLabel._attr.width + 'px',
	textOverflow: (
	(this.options.dataLabels.style || {})
	.textOverflow ||
	'ellipsis'
	)
	});
	dataLabel.shortened = true;
	}

dataLabel._attr.width is sometimes negative and because of that not set at all

[KacperMadej]

Workaround:
You could use a wrapper provided in this demo: https://jsfiddle.net/BlackLabel/bLrujcfa/5/

@writetonsharma Please check on your web site if the wrapper will resolve your issue, to confirm the solution will work for you. The wrapped code needs to be loaded before a chart will be create, but after all Highcharts files (core + modules) will be loaded.

[writetonsharma]

I tried the solution and put the code at the beginning of the <script> section. I think it is working. I have sent the HTML to our support and they will get it verified from the customer. I will let you know whatever the reply will be.
Thank you so much for the help!