Programmatically Formatting Bar Chart Widget Value Labels in Sisense (Republished)
Summary: Jeremy Friedel provides an article detailing methods to format Sisense Bar Chart Widget Value labels using scripts. The discussion includes steps for customizing the styling of data labels, preventing label overlap, and dynamically adjusting space for labels by altering the y-axis maximum value. These techniques aim to enhance the readability and appearance of bar chart widgets. The post encourages further exploration through related documentation.
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
Y-Axis Maximum Set To a Very Large Value
Check out this related content:
Academy
Documentation
