cancel
Showing results for 
Search instead for 
Did you mean: 

Add Data label to center of donut chart

harikm007
13 - Data Warehouse
13 - Data Warehouse

Hi,

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

harikm007_0-1651986366921.png

Refer - https://www.binextlevel.com/post/add-data-label-to-center-of-donut-chart

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));

});

-Hari

 

0 REPLIES 0