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:
1 ACCEPTED SOLUTION
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?
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.
