Bar Chart - Prevent bars from hiding the value label text | Widget & Dashboard Scripts

Bar Chart - Prevent bars from hiding the value label text

When creating a bar chart and formatting it to include "Values", you might find out that the bars cover their values. The following (widget) code manipulates the bars' width and label position:

const labelWidth = 25 + 5 // 5 is the space between the label and the bar<br/><br/>widget.on('domready', function(widget) {<br/>  try {<br/>    console.log('DOM Ready script starting (wid=' + widget.oid + ')');<br/><br/>    // Get plot width<br/>    plotWidth = parseInt(widget.chart[0].getElementsByClassName('highcharts-plot-border')[0].getAttribute('width'));<br/><br/>    // Find Widest bar<br/>    maxBarWidth = -1;<br/>    widget.chart[0].getElementsByClassName('highcharts-series','highcharts-bar-series').forEach(bar => { <br/>      bar.childNodes.forEach(rect => {<br/>        if (parseInt(rect.getAttribute('height')) > maxBarWidth)<br/>        maxBarWidth = parseInt(rect.getAttribute('height'))<br/>      }) <br/>    })<br/><br/>    if (maxBarWidth == -1) return;<br/><br/>    // Check if we require adjustment<br/>    if (plotWidth - maxBarWidth > labelWidth) return;<br/><br/>    ratio = (maxBarWidth - labelWidth) / maxBarWidth;<br/><br/>    // Adjust Bar height and location<br/>    barsArray = widget.chart[0].getElementsByClassName('highcharts-series','highcharts-bar-series');<br/>    labelsArray = widget.chart[0].getElementsByClassName('highcharts-data-labels');<br/><br/>    for (let seriesNum = 0; seriesNum < barsArray.length; seriesNum++) {<br/>      for (let barNum = 0; barNum < barsArray[seriesNum].childNodes.length; barNum++) {<br/>        currentWidth = parseInt(barsArray[seriesNum].childNodes[barNum].getAttribute('height')); <br/>        currentY = parseInt(barsArray[seriesNum].childNodes[barNum].getAttribute('y'));<br/>        transformLabel = labelsArray[seriesNum].childNodes[barNum].getAttribute('transform')<br/><br/>        // Calculate offset<br/>        offset = Math.round(currentWidth * (1-ratio))<br/><br/>        // Adjust bars<br/>        barsArray[seriesNum].childNodes[barNum].setAttribute('height',currentWidth-offset)<br/>        barsArray[seriesNum].childNodes[barNum].setAttribute('y',currentY+offset)<br/><br/>        // Adjust labels<br/>        newLabel = 'translate(' + (currentWidth - offset) + ',' + transformLabel.split(',')[1]<br/>        labelsArray[seriesNum].childNodes[barNum].setAttribute('transform',newLabel)<br/>      }<br/>    }<br/>  }<br/>  catch (error) {<br/>    console.error(error);<br/>  }<br/>  finally {<br/>    console.log('DOM Ready script complete (wid=' + widget.oid + ')');<br/>  }<br/>});

Before	After

Ophir_Buchman

Posted 4 years ago·Last reply 2 years ago

9 comments

Jake Raz

·2 years ago

Hello! This script doesn't seem to work on stacked bar charts. On regular (non-stacked) bar charts it mostly works as expected, and I can adjust the number in the first line to adjust how much space there is. However, when I try the same script on stacked bar charts, it doesn't seem to have any effect, regardless of which number I put in the first line.

I bet it's due to the break-by splitting the bars into multiple stacked bars, and the script is only designed to shorten single bars. Is there a way to modify the script so it works on stacked bars instead?

DRay

·2 years ago

Does this script help? https://community.sisense.com/t5/help-and-how-to/column-chart-prevent-bars-from-hiding-the-value-label-text/m-p/2715#M564

Tri Anthony

·2 years ago

Hi fabricio_fta and Jake_Raz, please try this script below. This should work for:

all Cartesian charts (Column, Bar, Line, and Area charts),
negative values,
single and multiple series (classic or stacked, using Break By or multiple values).

/***  This script is for increasing the y-axis max value by adding a percent of the highest value in the series to the y-axis max value.
Similarly, in cases where the minimum value is negative, it also decreases the y-axis min value by subtracting a percent of the lowest value in the series from the y-axis min value. ***/

//Set the offset percent to add/subtract to/from the y-axis max/min value here
var percentToAdd = 20;

widget.on('processresult', function(se,ev){

	var numberOfSeries = ev.result.series.length;

	var seriesData = [];

	var dataPoints = [];

	for(i=0; i < numberOfSeries; i++) {

		seriesData[i] = ev.result.series[i].data;

		var numOfDataPoints = seriesData[i].length;

		if(widget.subtype.includes('stacked')) {

			if(i==0) {
				for(j=0; j < numOfDataPoints; j++) {

					var dataToPush = seriesData[i][j].y;

					dataPoints.push(dataToPush);
				}
			}
			else {
				for(j=0; j < numOfDataPoints; j++) {

					dataPoints[j] = dataPoints[j] + seriesData[i][j].y;
				}
			}
		}

		else if(widget.subtype.includes('classic') || widget.subtype.includes('basic')) {

			for(j=0; j < numOfDataPoints; j++) {

				var dataToPush = seriesData[i][j].y;

				dataPoints.push(dataToPush);
			}
		}
	}

	var maxValue = Math.max.apply(Math, dataPoints);

	var minValue = Math.min.apply(Math, dataPoints);


	if(ev.result.yAxis[0].max <= 0) {
		ev.result.yAxis[0].max = 0
	}
	else {
		ev.result.yAxis[0].max = maxValue * (1 + percentToAdd/100);
	}

	if(ev.result.yAxis[0].min >= 0) {
		ev.result.yAxis[0].min = 0;
	}
	else {
		ev.result.yAxis[0].min = minValue * (1 + percentToAdd/100);
	}


})

Jake Raz

·2 years ago

This seems to work! Thanks!

fabricio_fta

·3 years ago

How this code could also work for negative bar charts? For us, it's working fine for positive values, but for negative values, it does not.

Example:

We would like that the numbers once inside the bar would be white as the third bar is and once they out they would be gray the first bar is.

BIQ

·4 years ago

How can we get this code to work on column charts as well?

Ophir_Buchman

OP4 years ago

BIQ

See https://community.sisense.com/t5/build-analytics/column-chart-prevent-bars-from-hiding-the-value-label-text/m-p/2715#M564

cartercjb

·4 years ago

Ophir_Buchman how do you apply fill-opacity to the bars only so that it does not apply to the data labels as well?

Ophir_Buchman

OP4 years ago

Hi cartercjb

In 'domready' - Perform the following:

$('.highcharts-series.highcharts-series-1')[0].childNodes.forEach(item => item.setAttribute('opacity',0.3))