Format data labels

By default, the format of all data labels in a widget is the same. So sometimes its bit difficult to identify which data label is belongs to which series/legend. We can use below script to set background color of data label same as series/legend and format the label.

 

 

 

 

 

 

 

 

 

 

 

Steps:

1. Create a widget

2. Add below script to widget. Update the variable `borderColor` and 'backgroundColor' if required.

3. Save the script and refresh the widget

Refer : https://www.binextlevel.com/post/format-data-labels

widget.on('processresult', function(se, ev){

	$.each(ev.result.series, function(seriesIndex, seriesValue){
		
			if(seriesIndex == 0){
				borderColor = '#94FF77'
				backgroundColor = 'rgba(148, 255, 119, 0.2)'
			}else if(seriesIndex == 1){
				borderColor = '#FFB4B4'
				backgroundColor = 'rgba(255, 180, 180, 0.2)'
			}
		
		
			seriesValue.dataLabels = {
										borderColor: borderColor,
										backgroundColor: backgroundColor,
										borderWidth: 1,
										borderRadius:3,
										padding: 3,
										style: {
											fontWeight: 'bold'
										}
			}

	})

})

-Hari