Hide the leader lines on Pie Charts when displaying Value or Category Labels

[Jake_Raz]

In the formatting options for the Pie Chart widget, under the 'Design' tab, you can choose to display various data labels on the chart. If you select either "Value" or "Category" then these will display outside the Pie Chart and will also display little leader lines (or pointer lines, or whatever you want to call them) that point from the value to the pie slice they belong to.

Is there a script I can use to hide these, while still displays the value and/or category? Here's a mock-up of what I mean:

[DRay]

Hi @Jake_Raz.

Thank you for your question. I haven't been able to test this script due to issues with my test environment, but give this a try, 

javascript
widget.on('processresult', function(se, ev) {
    var options = ev.result.seriesDefaults.labels;
    options.template = "#= category #: #= value #";
    options.distance = -30; // Adjusts how close the labels are to the edges of the pie slices
    options.color = "#fff"; // Optional: changes labels color, modify as needed

    // Disable connectors (leader lines)
    options.connectors = {
        width: 0,
        color: "transparent"
    };
});

**Explanation:**
   - processresult: This function is called after the data is processed but before it is rendered. It's the right place to make changes to the chart’s configuration.
   - labels.template: This controls what is displayed in the labels. Here, it shows both the category and value. You can customize it to your needs.
   - labels.distance: This moves the label closer or farther from the center. You should adjust this value based on your label size and chart dimensions.
   - labels.connectors.width: Setting this to 0 effectively hides the leader lines.
   - labels.connectors.color: Setting color to "transparent" further ensures that the lines are not visible.
   - labels.color: This is optional, allowing you to set the color of the text, which can be handy depending on your chart's background.

This script will hide the leader lines effectively while retaining the labels. Customize the parameters further according to your specific visual design preferences. Should you have more complex visualization needs or run into any issues, don’t hesitate to reach out. 

[Jake_Raz]

Hmm, I tried using that script but it wouldn't work. On the particular pie chart I was working on, I was using "value" and "percent", so I wasn't quite sure what to put for labels.template. I tried using:

    options.template = "#= value #: #= percent #";

But that didn't seem to work, neither did flipping the order (percent first). I also tried changing the pie chart to display "category" and "value", as in your example, then copy/pasted the script exactly, but it still didn't work. The leader lines still show.

My original pie chart had multiple items in the "Values" section and nothing under "Categories" (left hand sidebar). I wasn't sure if that made a difference, so I tried creating a brand new Pie Chart with only one value and an item in the 'Categories' section. However, the script still didn't work in that instance, either 😔

[DRay]

Well, thank you for checking. I'll noodle around with it, or find another resource to look into this. I'll keep you posted.

[AssafHanina · Accepted solution]

Hey @Jake_Raz ,

Please try to use the following Widget Script on the Pie Chart to remove the lines while still displaying the values or categories.

widget.on('processresult', function(w, args) {
    args.result.series.forEach(function(series) {
        series.dataLabels = {
            enabled: true,
            connectorWidth: 0,  // Set the width of the line (connector) to 0
            style: {
                textOutline: 'none'  // Remove text outline if needed
            }
        };
    });
});

Best Regards

[Jake_Raz]

Thanks! That script seemed to work, at least on normal Pie Charts. Appreciate it!

A follow-up question: I have another script that I'm trying to combine this with. It's a script I found in an "old" community post that lets you show the values inside the pie slices (instead of the percentages): https://community-old.sisense.com/hc/en-us/community/posts/221227488-Show-values-inside-pie-chart-in...

Here's the script I'm using:

widget.on('ready', function(w) {

// Get the data objects
var data = w.queryResult.series[0].data;

// Find the formatted data values
var labelElements = $('g.highcharts-data-labels',element).children();
// Loop through each value label and save the text
var labelValues = [];
$.each(labelElements, function() {
// Get the current value label
var newValue = $('tspan',this).last(); 
// Save the value
labelValues.push( newValue.text() );
// alert(newValue.text());
// Remove the outside value label
newValue.remove();
}); 

// Find the inside value label
var labels = $('text.pie-percent-label',element);

// Pass the formatted labels to the front end
for (i=0; i< data.length; i++) {
// Grab the matching value label
var myLabel = labelValues[i+data.length]; 
// Update the inside label 
$(labels[i]).text(myLabel);
// Adjust the font size for the inside label
var fontSize = parseInt($(labels[i]).css('font-size'));
$(labels[i]).css('font-size',fontSize);
// Adjust the location for the inside label
var y = parseInt($(labels[i]).attr('y')) +10;
$(labels[i]).attr('y',y);
}
})

When I use this script, it shows the values inside the pie slice, as expected, but the leader lines are still showing.

I tried adding your new script to the bottom of the script window. While it hid the leader lines, it also reverted the prior script (note how it reverted back to the percentages inside the pie slices, not the values).

(Note: I also tried pasting your script first and having the pie slice script be second, but that didn't make a difference)

I'm guessing it's due to the two scripts being incompatible with each other. Like, maybe your script is undoing the actions of the first somehow. If so, is there a way to modify either of them to fix this, or combine them in some fashion?

[Jake_Raz]

Nevermind, I think I figured it out. This script seems to successfully combine both functions:

widget.on('ready', function(w) {
    // Delay to ensure the DOM elements are fully rendered
    setTimeout(function() {
        // Get the data objects
        var data = w.queryResult.series[0].data;

        // Find the formatted data values
        var labelElements = $('g.highcharts-data-labels', element).children();
        // Loop through each value label and save the text
        var labelValues = [];
        $.each(labelElements, function() {
            // Get the current value label
            var newValue = $('tspan', this).last(); 
            // Save the value
            labelValues.push(newValue.text());
            // Remove the outside value label
            newValue.remove();
        }); 

        // Find the inside value label
        var labels = $('text.pie-percent-label', element);

        // Pass the formatted labels to the front end
        for (var i = 0; i < data.length; i++) {
            // Grab the matching value label
            var myLabel = labelValues[i + data.length]; 
            // Update the inside label 
            $(labels[i]).text(myLabel);
            // Adjust the font size for the inside label
            var fontSize = parseInt($(labels[i]).css('font-size'));
            $(labels[i]).css('font-size', fontSize);
            // Adjust the location for the inside label
            var y = parseInt($(labels[i]).attr('y')) + 10;
            $(labels[i]).attr('y', y);
        }

        // Hide the leader lines
        $('g.highcharts-data-labels').find('path').attr('d', '');
    }, 100);  // Adjust the delay as needed
});

This hides the leader lines while ALSO replacing the percentages inside the pie slices with the raw totals instead.

[AssafHanina]

hey @Jake_Raz ,

Happy to hear that the issue is resolved and thanks for sharing the script as well.
Unfortunately, the script is not working on my end, Probably a version related issue. 

If necessary, the following script positions the values within the Pie chart, and it can be style differently (though not compatible with 'Others').

It requires enabling the values and disabling the percentages. The category is also displayed in the Pie Chart, but it can be toggled off and placed in the Legend instead.

widget.on('processresult', function(w, args) {
    args.result.series.forEach(function(series) {
        series.dataLabels = {
            enabled: true,        // Ensure data labels are shown
            connectorWidth: 0,    // Remove the connector line by setting its width to 0
            distance: -35,        // Move the labels inside the pie slices (adjust the value as needed)
            style: {
                textOutline: 'none',  // Remove any text outline from the labels
                color: 'black',       // Set text color to white for better contrast (optional)
                fontWeight: 'bold',    // Set font weight to bold for better visibility (optional)
				fontSize: '16px' // Set font Size 
            }
        };
    });
});

Best Regards