Forum Discussion

gwolfe's avatar
gwolfe
Data Pipeline
03-31-2022
Solved

Data Labels Inside Donut Chart

Hi all, does anyone know how to get the data labels to the center of a donut chart?  I would also like to reduce the width of the secondary value (like the orange part below). Thanks

 

 

dashboards & reporting
  • harikm007's avatar
    harikm007
    04-01-2022

    gwolfe ,

    Please try below script to display label inside donut chart. If you need to display a static text, assign text to variable titleText 

    widget.on('processresult', function(se, ev){
	
	sum = 0
	
	$.each(ev.result.series[0].data, function(index, value){
		sum = sum + value.y
	})
	
	categoryValue = ev.result.series[0].data.find(el=>el.name == 'South').y  //Update name of category for which the percentage need to be displayed
	titleText = Math.round((categoryValue/sum) * 100) + '%'

	ev.result.title.text = titleText
	ev.result.title.align = 'center'
    ev.result.title.verticalAlign = 'middle'
    
})

     

     

    -Hari

     

     

4 Replies

Replies have been turned off for this discussion
  • harikm007's avatar
    harikm007
    Data Warehouse
    04-01-2022

    gwolfe ,

    Please try below script to display label inside donut chart. If you need to display a static text, assign text to variable titleText 

    widget.on('processresult', function(se, ev){
	
	sum = 0
	
	$.each(ev.result.series[0].data, function(index, value){
		sum = sum + value.y
	})
	
	categoryValue = ev.result.series[0].data.find(el=>el.name == 'South').y  //Update name of category for which the percentage need to be displayed
	titleText = Math.round((categoryValue/sum) * 100) + '%'

	ev.result.title.text = titleText
	ev.result.title.align = 'center'
    ev.result.title.verticalAlign = 'middle'
    
})

     

     

    -Hari