Programmatically Formatting Bar Chart Widget Value Labels in Sisense

This article outlines ways to programmatically format Sisense Bar Chart Widget Value labels via widget scripts, covering methods to prevent label overlap and apply consistent styling across all labels.

Custom Styling for Data Labels

The script below enables the formatting of Chart Widget Value labels by setting a custom background color, padding, and border-radius. Ensure the default data label UI option is disabled. Other CSS and Highcharts settings can be added as needed.

widget.on('render', function (se, ev) {
    ev.widget.queryResult.plotOptions.bar.dataLabels = {
        backgroundColor: '#f5d142',
        color: 'white',
        padding: 5,
        borderRadius: 5,
        enabled: true
    }
})

Preventing Label Overlap

The script below manually adjusts value label positioning to prevent overlap in densely populated bar chart widgets. The exact formulas for label positioning can be changed as needed.

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

Dynamically Increase Space for Labels

If bar value labels overlap with the chart bars, you can dynamically adjust the maximum value on the y-axis to create additional space. A different formula, or a hard-coded value, can also be used as the y-axis maximum value.

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

Conclusion

These scripts enable customizing dynamically formatted and well-positioned data labels in your Sisense charts, enhancing readability and aesthetics beyond the default Sisense data bar data labels in bar chart widgets.

For further discussion of these types of scripts, see the Dynamically Formatted Data Labels article

Example Of Custom Labels Added via Scripting