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 (Category 24), it is challenging to interpret this when the report is exported to PDF. 

 

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

     

4 Replies

Replies have been turned off for this discussion
  • 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