Forum Discussion

Jake_Raz's avatar
Jake_Raz
ETL
07-09-2024
Solved

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

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 disp...
dashboards & reporting
  • AssafHanina's avatar
    AssafHanina
    07-10-2024

    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's avatar
Jake_Raz
ETL
07-09-2024

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's avatar
DRay
Admin
07-09-2024

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's avatar
    AssafHanina
    Sisense Employee
    07-10-2024

    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's avatar
      Jake_Raz
      ETL
      07-10-2024

      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-instead-of-percentage

      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's avatar
        Jake_Raz
        ETL
        07-12-2024

        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.