cancel
Showing results for 
Search instead for 
Did you mean: 

DONUT CHART DATA LABELS

cartercjb
10 - ETL
10 - ETL

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. 

cartercjb_0-1643056610627.png

 

2 ACCEPTED SOLUTIONS

harikm007
12 - Data Integration
12 - Data Integration

@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

View solution in original post

harikm007
12 - Data Integration
12 - Data Integration

@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

 

View solution in original post

4 REPLIES 4

harikm007
12 - Data Integration
12 - Data Integration

@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

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
12 - Data Integration
12 - Data Integration

@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

 

Thanks, @harikm007 . That worked!!