cancel
Showing results for 
Search instead for 
Did you mean: 

Column Chart - Prevent bars from hiding the value label text

Ophir_Buchman
Sisense Team Member
Sisense Team Member

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
Ophir_Buchman_0-1648034803433.png Ophir_Buchman_1-1648034829612.png
0 REPLIES 0
Voice of Customer
Impact Business Intelligence (BI) and Analytics Market Research

Click Here & Complete Dresner's Wisdom of Crowds® Market Study Survey Today!

Community Toolbox

Recommended quick links to assist you in optimizing your community experience:

Need additional support?:

Community Support Request

Don't miss out:

Earn a BETA Launch Challenge Badge!