How to Dynamically Format Data Labels in Sisense Charts
Objective:
This guide helps you format data labels in Sisense charts dynamically, preventing overlap and applying consistent styling across all labels.
Steps:
1. Initialize the Widget Script:
Add the following script to your Sisense widget to format the data labels with a custom background color, padding, and border-radius.
widget.on('processresult', function(se, ev) {
ev.result.series.forEach(function(series) {
series.dataLabels = {
backgroundColor: '#f5d142',
color: 'white',
padding: 5,
borderRadius: 5
}
})
2. Adjust Data Labels Position:
To ensure that the data labels do not overlap and are appropriately positioned within the bars, use this script.
widget.on('domready', function(se, ev) {
var barWidth = $('.highcharts-series-group .highcharts-series rect', element).width();
$('.highcharts-data-labels .highcharts-label', element).each(function() {
var labelWidth = $(this).find('rect').width();
var labelHeight = $(this).find('rect').height();
$(this).find('rect').attr('x', ($(this).find('rect').attr('x') + 2));
$(this).find('rect').attr('height', barWidth);
$(this).find('rect').attr('y', ((labelHeight - barWidth) / 2));
})
3. Dynamically Increase Space for Labels:
If data labels overlap with the chart bars, you can dynamically adjust the maximum value on the y-axis to create additional space.
widget.on('processresult', function(se, ev) {
var maxValue = 0;
var increasePercent = 0.2;
ev.result.series.forEach(function(series) {
series.data.forEach(function(dataItem) {
if (dataItem.y > maxValue) maxValue = dataItem.y;
})
ev.result.yAxis[0].max = maxValue + (increasePercent * maxValue);
})
Result:
Implementing these scripts will result in dynamically formatted and well-positioned data labels on your Sisense charts, improving readability and aesthetics.
For further customization and solutions, refer to this post in the Sisense Community: https://community.sisense.com/t5/build-analytics/dynamically-formatted-data-labels/m-p/1838#M223.
