top of page

Add Data label to center of donut chart

Below script will display total value at the center of donut chart.



Steps:

  1. Create a donut chart

  2. Add below script to the widget. Update the variable labelColor and labelFontSize with color and font size of data label

  3. Save the script and refresh widget



var titleText = ''
var labelColor = '#4287f5'
var labelFontSize = '24px'

widget.on('processresult', function(se, ev){
	
	sum = 0
	
	panelItem =ev.widget.metadata.panels[1].items[0]
	itemMask = $$get(panelItem, "format.mask", {})

	var numberFormatter = prism.$injector.get('$filter')('numeric');
	
	$.each(ev.result.series[0].data, function(index, value){
		sum = sum + value.y
	})
	
	titleText = 'Total <br>' + numberFormatter(sum, itemMask);
	
	ev.result.title.text = titleText
	ev.result.title.align = 'center'
    ev.result.title.verticalAlign = 'middle'
	ev.result.title.style = {
            color: labelColor, //Color of value label inside donut
            fontWeight: 'bold', 
			fontSize: labelFontSize//Font size of value label inside donut
        }
    
})

widget.on("ready", function(w, args){
	
	chart = w.chart[0][Object.keys(w.chart[0])[0]].hc


	var textX = chart.plotLeft + (chart.series[0].center[0]);
	var textY = chart.plotTop  + (chart.series[0].center[1]);

	title = $('svg .highcharts-title')

	title.attr('x', textX + (title.width() * -0.5));
	title.attr('y', textY + (title.height() * -0.5));

});



Comments

Rated 0 out of 5 stars.
No ratings yet

Add a rating
BI Next Level white logo

BI Next Level is your trusted resource for BI customization, data solutions, and expert insights. Explore practical tips, scripts, and tutorials for tools like Sisense, Python, and SQL. Let’s transform your data into impactful insights together.

Quick Links
Connect with us
Copyright © 2024. All Rights Reserved. Designed, Developed & Maintained  by Intertoons
bottom of page