Forum Discussion

cartercjb's avatar
cartercjb
ETL
01-24-2022
Solved

DONUT CHART DATA LABELS

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 (Cat...
Blox
Code-first Analytics
dashboards & reporting
  • harikm007's avatar
    harikm007
    01-25-2022

    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's avatar
    harikm007
    02-18-2022

    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

     

harikm007's avatar
harikm007
Data Warehouse
01-25-2022

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's avatar
cartercjb
ETL
02-18-2022

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's avatar
    harikm007
    Data Warehouse
    02-18-2022

    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