DONUT CHART DATA LABELS

[cartercjb]

Hello Sisense Community!

Any suggestions on how to make the data labels' percent appear underneath the categories, where the values currently are? In instances where a donut slice is too small (Category 24), it is challenging to interpret this when the report is exported to PDF. 

[harikm007 · Accepted solution]

@cartercjb Try this widget script :

widget.on('processresult', function(se, ev){
	ev.result.plotOptions.pie.dataLabels.formatter = function(){
		//return (this.key + '<br>' + Math.round(this.percentage) + '%') // to display only percentage in data label
		return (this.key + '<br>' + this.y + ' / ' + Math.round(this.percentage) + '%') //to display both value and percenatge in data label
	}

})

 -Hari

[harikm007 · Accepted solution]

@cartercjb Try this widget script :

widget.on('processresult', function(se, ev){
	ev.result.plotOptions.pie.dataLabels.formatter = function(){
		//return (this.key + '<br>' + Math.round(this.percentage) + '%') // to display only percentage in data label
		return (this.key + '<br>' + this.y + ' / ' + Math.round(this.percentage) + '%') //to display both value and percenatge in data label
	}

})

 -Hari

[cartercjb]

Thanks as always, @harikm007 . That worked perfectly.

Just curious, is there a way to incorporate a change to the category (this.key) text? For instance, in that example there is a category labeled "6-9".  I want that to read "Category C" instead.

I know of this script for a column chart but I'm unsure how to apply it to this chart type.

widget.on('render', function(widget,args){
 widget.queryResult.xAxis = {
     categories: widget.queryResult.xAxis.categories,
     //Runs every value in the category through this function 
     labels: {
         formatter: function () {
          if(this.value == 'LW') {
           return 'Lori'
          }
		if(this.value == 'THy') {
           return 'Tracy'
          }
			 else {
          // starArr = this.value.split(' ')
           return 'Carter' // strArr[strArr.length - 1]
          }
         },
     }
 }
})

Thanks!

-Carter

[harikm007 · Accepted solution]

@cartercjb ,

Please try this script. Update the variable 'displayTextMapping' with actual text and text you need to replace with. If there is no matching text found, it will take text from 'Default' key

var displayTextMapping = {
	'LW'  : 'Lori',
	'THy' : 'Tracy',
	'Default' : 'Carter'
}

widget.on('processresult', function(se, ev){
	ev.result.plotOptions.pie.dataLabels.formatter = function(){
		
		if(!displayTextMapping.hasOwnProperty(this.key))
			displayText = displayTextMapping['Default']
		else
			displayText = displayTextMapping[this.key]
			
		//return (this.key + '<br>' + Math.round(this.percentage) + '%') // to display only percentage in data label
		return (displayText + '<br>' + this.y + ' / ' + Math.round(this.percentage) + '%') //to display both value and percenatge in data label
	}

})

-Hari

[cartercjb]

Thanks, @harikm007 . That worked!!