Column Chart - Prevent bars from hiding the value label text
When creating a column chart and formatting it to include "Values", you might find out that the bars cover the column values. The following (widget) code manipulates the columns' height and label position:
const labelHeight = 25
widget.on('domready', function(widget) {
try {
console.log('DOM Ready script starting (wid=' + widget.oid + ')');
// Get plot height
plotHeight = parseInt(widget.chart[0].getElementsByClassName('highcharts-plot-border')[0].getAttribute('height'));
if (plotHeight < labelHeight * 3) return;
// Find Highest column
maxColumnHeight = -1;
widget.chart[0].getElementsByClassName('highcharts-series','highcharts-column-series').forEach(column => {
column.childNodes.forEach(rect => {
if (parseInt(rect.getAttribute('height')) > maxColumnHeight)
maxColumnHeight = parseInt(rect.getAttribute('height'))
})
})
if (maxColumnHeight == -1) return;
// Check if we require adjustment
if (plotHeight - maxColumnHeight > labelHeight) return;
ratio = (maxColumnHeight - labelHeight) / maxColumnHeight;
// Adjust Column height and location
columnsArray = widget.chart[0].getElementsByClassName('highcharts-series','highcharts-column-series');
labelsArray = widget.chart[0].getElementsByClassName('highcharts-data-labels');
for (let seriesNum = 0; seriesNum < columnsArray.length; seriesNum++) {
for (let columnNum = 0; columnNum < columnsArray[seriesNum].childNodes.length; columnNum++) {
currentHeight = parseInt(columnsArray[seriesNum].childNodes[columnNum].getAttribute('height'));
currentY = parseInt(columnsArray[seriesNum].childNodes[columnNum].getAttribute('y'));
transformLabel = labelsArray[seriesNum].childNodes[columnNum].getAttribute('transform')
// Calculate offset
offset = Math.round(currentHeight * (1-ratio))
// Adjust columns
columnsArray[seriesNum].childNodes[columnNum].setAttribute('height',currentHeight-offset)
columnsArray[seriesNum].childNodes[columnNum].setAttribute('y',currentY+offset)
// Adjust labels
newLabel = transformLabel.split(',')[0] + ',' + (currentY+offset-labelHeight) + ')';
labelsArray[seriesNum].childNodes[columnNum].setAttribute('transform',newLabel)
}
}
}
catch (error) {
console.error(error);
}
finally {
console.log('DOM Ready script complete (wid=' + widget.oid + ')');
}
});
Before | After |
Published 03-23-2022
Ophir_Buchman
Data Integration
Joined October 19, 2021