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:
-
Create a widget
-
Add below script to widget. Update the variable `borderColor` and 'backgroundColor' if required.
-
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
