Sunburst chart: Circular labels don't show when the numbers are large and the difference between parent and child is very small

[Luca-Busse]

Expected behaviour

When dataLabels are enabled and circularMode is enabled, the labels should always show.

Actual behaviour

When the difference between parent node and child node is very small, e.g. root.value: 6284, child node value: 6283, the label for the child does not show.

Live demo with steps to reproduce

https://jsfiddle.net/L37wze5h/1/

Product version

Highcharts 10.2.1

Affected browser(s)

Microsoft Edge, Firefox, Chrome

[TorsteinHonsi]

Thanks for reporting!

@raf18seb I propose fixing it here:

highcharts/ts/Series/Sunburst/SunburstPoint.ts

Lines 107 to 112 in 6af547d

	// Check if dataLabels should be render in the
	// upper half of the circle
	if (end - start > Math.PI) {
	upperHalf = false;
	moreThanHalf = true;
	}

... by adding a block that separates the start and the end:

        // Check if dataLabels should be render in the upper half of the circle
        if (end - start > Math.PI) {
            upperHalf = false;
            moreThanHalf = true;
            // Close to the full circle, add some padding so that the SVG
            // renderer treats it as separate points (#18884).
            if ((end - start) > 2 * Math.PI - 0.01) {
                start += 0.01;
                end -= 0.01;
            }
        }

[Luca-Busse]

Thank you! When will this fix be available?

[jszuminski]

It's been merged, so it'll be available within the next release.

However, if you need to you can use the code from GitHub: https://jsfiddle.net/BlackLabel/fjrus9pw/

[Luca-Busse]

Thank you!