Changing Value Label's Font Size, Weight And Rotation

[intapiuser]

UPDATED SCRIPT IN COMMENTS

Introduction

Value labels at the floating figures above a series in a bar chart, column chart, or line chart.  

Purpose/Benefits

Changing value labels can be useful to make a measure stand out more.

Example

Steps

1.  Open the Edit Script window in the widget editor.  

2.  Paste the below code.

3.  Change "YourMeasure" to the measure name you would like to change.  (note: be sure to keep the quotes)

4.  Click Save

5  Refresh the dashboard page and click Apply.

/******* user configuration **********/ 
var seriesName = "YourMeasure"; 
/*************************************/ 
widget.on('processresult', function(sender, ev){ 

var data = _.find(ev.result.series, function (ser) {return ser.name == seriesName}).data 
_.each(data, function(value){ 
//enable dataLabels, change its font, make it bold and rotate by 270 
value.dataLabels = {enabled:true, style:{'fontSize':'35px', 'fontWeight':'bold'}, rotation: 270} 
}) 
})

[Jake_Raz]

Is it possible to add a background color or highlight to the value labels? I'm trying to apply this to the value labels on an area chart, and my problem is that the labels sometimes overlap with the dark colors of the area chart. I can't just make the value label's font color white, because then the parts of the labels that aren't overlapping the area chart would be invisible against the white background. I can try and set it to a middle grey color, but then they won't stand out very well against either the area chart's colors or the background.

Ideally I could just set some sort of background color or highlight to the value label, this way the values are always visible no matter what's behind them. I tried adding "backgroundColor" and "borderColor" to the style tag, but that didn't seem to work. 

[JamieR]

Are there any plans for making this very basic feature available without using a script? Excel and Tableau both make this much easier. Even this comment box has a button for changing the size of my text!

[SiftHealthcare]

This script no longer works in version L2023.11. Is there a fix for that? @intapiuser 

[DRay]

Hi @SiftHealthcare.

Thank you for reaching out. We tested this with 24.1 and it worked. We don't have a 23.11 environment ready at the moment. Can you provide any details about the issue you are having?

[SiftHealthcare]

@DRay It does not work with filtering. Once a filter is applied the widget appears frozen and it unusable. This also happens when you try to drill into the widget.

[DRay]

@SiftHealthcare 

Thank you for the update. I'll have someone work through the code and see if it can be fixed to work with Filters.

[SiftHealthcare]

Hello @DRay any update on this?

[DRay]

Hi @SiftHealthcare.

Thank you for following up. I have an engineer looking at it, but we don't have a solution yet. I'll chase them up and try and get an update.

[TriAnthony]

Hi @SiftHealthcare,

Apologies for the delay here.

Below is the updated script. This script iterates through the series, so there is no need to specify a series name in the code. Let me know if you'd like a version of the script that formats only certain series in the widget, excluding the others.

//Customize value labels formatting
widget.on('processresult', function(w, e) {

	// Iterate through each series in the chart data
	e.result.series.forEach(function(series) {

		// Check if the data labels object exists for the current series
		if (!series.dataLabels) {
			series.dataLabels = {};
		}

		// Enable the data labels
		series.dataLabels.enabled = true;

		series.dataLabels.style = {

			// Change the labels color
			color: "#000000",

			// Change the labels size
			fontSize: "25px",

			// Change the labels weight
			fontWeight: "bold"

		};
		
		// Change the labels rotation
		series.dataLabels.rotation = 350;
		
		// Change the y position offset of the labels
		series.dataLabels.y = 40;

	});
});

[SiftHealthcare]

Thank you @TriAnthony this is very close to resolving my issue. Is there any way to adjust this by percent instead of a set value? I tired this on specifically a bar chart and it cause all of the values to be spaced out further instead of just adjusting the whole graph section.

[TriAnthony]

Hi @SiftHealthcare, are you referring to the 'y' property below?

// Change the y position offset of the labels
series.dataLabels.y = 40;

This property is for the vertical offset of the label relative to the point in pixels. It cannot be set to a percentage.

However, in a bar chart, you likely want to configure the 'x' property instead, which is the horizontal offset of the label relative to the point.

For example, here is how the labels look like with x = 0.

Here is how they look like with x = 40.

Here is how they look like with x = -60.

Let me know if this is helpful.

[SiftHealthcare]

Hi Tri,

Thanks for the update but unfortunately this does not resolve my issue. In your screenshots the highest value is still not showing. The issue I am trying to correct is to show all data labels on top of the column or bar. 

[TriAnthony]

@SiftHealthcare Thank you for clarifying that! To ensure all data labels are shown, you can use the script below to dynamically set the y-axis maximum value. Set the variable percentToAdd to the percentage of the maximum value to add to the y-axis, e.g. if the maximum value in the chart is 100, setting the percentToAdd variable to 10 will change the y-axis max value to 110.

Let me know if this works for you.

/***  This script is for increasing the y-axis max value by adding a percent of the maximum value from the series to the y-axis. ***/

//Set the offset percent to add to the y-axis max value here
var percentToAdd = 10;

widget.on('processresult', function(se,ev){
	
	var seriesData = ev.result.series[0].data;
	var numOfDataPoints = seriesData.length;
	var dataPoints = [];

	for(i=0; i < numOfDataPoints; i++) {
		dataPoints.push(seriesData[i].y)
	}
	
	var maxValue = Math.max.apply(Math, dataPoints);
	
	ev.result.yAxis[0].max = maxValue * (1 + percentToAdd/100);
	
})

[TriAnthony]

Hi @SiftHealthcare, I wanted to follow up on my previous comment. The script I sent in that comment is limited to just positive values and classic (non stacked) chart. Please use the updated script below instead.

This script works 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);
	}


})

[SiftHealthcare]

Hi @TriAnthony thanks for the update! However it is working for some widgets but not for others. Any ideas why this would happen?