Programmatically Formatting Bar Chart Widget Value Labels in Sisense
Summary: Jeremy Friedel provides a detailed explanation on customizing bar chart widget value labels in Sisense using scripts. The article covers several techniques including setting custom styling for data labels, preventing label overlap through manual positioning adjustments, and dynamically increasing space for labels to enhance readability and aesthetics. The scripts utilize various CSS and Highcharts settings to customize background color, padding, and positioning of labels. Additionally, instructions are provided for adjusting the y-axis maximum value to prevent overlapping with chart bars.
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
Check out this related content:
Academy
Documentation
Jeremy Friedel
OP2 months agoThe header image aspect ratio has been modified, here is the original image.
