cancel
Showing results for 
Search instead for 
Did you mean: 

Data Labels Inside Donut Chart

gwolfe
9 - Travel Pro
9 - Travel Pro

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

 

gwolfe_0-1648761361912.png

 

1 ACCEPTED SOLUTION

harikm007
12 - Data Integration
12 - Data Integration

@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'
    
})

 

harikm007_0-1648819860486.png

 

-Hari

 

 

View solution in original post

3 REPLIES 3

Ophir_Buchman
Sisense Team Member
Sisense Team Member

Hi @gwolfe 

Take a look at this as a first resource:
https://support.sisense.com/kb/en/article/variable-radius-pie-chart

Customizing the internal JS may lead you to the result you may want

harikm007
12 - Data Integration
12 - Data Integration

@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'
    
})

 

harikm007_0-1648819860486.png

 

-Hari

 

 

gwolfe
9 - Travel Pro
9 - Travel Pro

@harikm007 That worked great. Thank you