Change text color for relative values in a bar chart [Linux]
In some cases, the text inside bar charts may be difficult to read when it closely matches the bar color. This guide demonstrates how to use a widget script to dynamically update the text color to the opposite of the bar color for better readability. Applicable for Sisense on-prem and cloud, all versions. Tested on version L2025.4
Step-by-Step Guide
- Ensure Value Label is turned on and selected stacked or stack 100 bar type
- Open your widget script editor: Navigate to the Bar Chart widget you want to customize, and open the “Edit Script” section.
- Insert the script below: This script will automatically update the text color of data labels in your bar chart to the opposite of the bar color.
Limitation: Does not work if the bar color is gray (the text will also appear gray).
// JavaScript
widget.on('beforeviewloaded', (scope, args) => {
args.options.series.forEach((s) => {
s.dataLabels = {
style: {
color: getOppositeColor(s.color)
}
}
})
})
function getOppositeColor(hex) {
if (!/^#?([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/.test(hex)) {
throw new Error("Invalid hex color format");
}
hex = hex.replace('#', '');
if (hex.length === 3) {
hex = hex.split('').map(char => char + char).join('');
}
let r = parseInt(hex.substring(0, 2), 16);
let g = parseInt(hex.substring(2, 4), 16);
let b = parseInt(hex.substring(4, 6), 16);
r = 255 - r;
g = 255 - g;
b = 255 - b;
let oppositeHex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
return oppositeHex;
}
Conclusion
Using this script, Sisense bar chart relative values will dynamically adjust their color to contrast with the bar color, making the chart easier to read.
- Works for stacked / stack 100 bar chart type with Value Labels enabled and Relative / Total values selected.
- Does not work if the bar color is gray (the text will also appear gray).
References/Related Content
- The full list of available options for dataLabels you can check/configure on a script level (such as color, font size, alignment, format, background, and borders) using this link:
Disclaimer: This post outlines a potential custom workaround for a specific use case or provides instructions regarding a specific task. The solution may not work in all scenarios or Sisense versions, so we strongly recommend testing it in your environment before deployment. If you need further assistance with this, please let us know.
Published 09-29-2025
