cancel
Showing results for 
Search instead for 
Did you mean: 
intapiuser
Community Team Member
Community Team Member
Introduction
By default Sisense allows users to create pie charts that show the percent to total inside each slice.  However, some users may want to see the actual value inside the chart instead of the percentage.  This article outlines how to configure that.
Steps
Here we will explain how to do it in detailed steps.

STEP 1 - CREATE A PIE CHART

On your dashboard, either edit and existing pie chart or create a new one.  Make sure you've got fields selected for Category and Value, so you should see the standard pie chart.  Make sure the options for Value and Percent labels are checked.  

STEP 2 - ADD THE SCRIPT

Under the settings menu, click on the Edit Script button to open the script editor. Copy and paste the below code into the script editor and click save.  Refresh the web page containing your pie chart, and you should see the data labels show up as the values instead of percentages.
Before V7.X :
widget.on('ready', function(w) {
 
 // Get the data objects
 var rawData = w.rawQueryResult.values;
 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 cate
 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 (i=0; i< data.length; i++) {
  // Grab the matching value label
  var myLabel = labelValues[i]; 
  // Update the inside label   
  $(labels[i]).text(myLabel);
  // Adjust the font size for the inside label
  var fontSize = parseInt($(labels[i]).css('font-size')) * 2/3;
  $(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);
 }

 // Clean up unneccesary lines
 if (w.style.labels.categories == false) {
  // Get all the path elements
  var paths = $('g.highcharts-series',element).children();
  // Drop the first x path elements
  for (j=0; j<labelValues.length; j++) {
   $(paths[j]).remove();
  }
 }
})
V7.X and above:
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);
}
})
Comments
Jake_Raz
9 - Travel Pro
9 - Travel Pro

If I de-select "categories", the pointer lines still display. Is there any way to hide those lines? For instance, if I wanted to show the categories in a legend rather than as a label on the chart itself?

IntravaMain
7 - Data Storage
7 - Data Storage

Do not use the script! When a pie piece is small Sisense removes the text and the script does not take that into account and shows the label in the next available text. Happens both on smaller screens and with smaller value of the data. You will be showing incorrect data! This script is not working correctly.

Version history
Last update:
‎03-02-2023 09:22 AM
Updated by:
Contributors
Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Developers Group:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

The Legal Stuff

Have a question about the Sisense Community?

Email community@sisense.com