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
8 - Cloud Apps
8 - Cloud Apps

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?

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:

Product Feedback Forum:

Need additional support?:

Submit a Support Request

Sisense Privacy Policy