Changing Value Label's Font Size, Weight and Rotation
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}
})
})-
Hi Sanjoy,
It is difficult to know what is causing your issue without more information. Please ensure the following steps. If that doesn't work, please send a screenshot of the code you implemented as well as the widget.
1. Please ensure that you don't have quotes around the rotation.
2. "YourMeasure" has double quotes and is named correctly.
-
Worthy hack? http://jsfiddle.net/ahwmv/2/
-
If you do not wish to use this on one specific serie, you can use this script:
widget.on('processresult', function(sender, ev){
_.each(ev.result.series,function(series,i){
_.each(series.data,function(value){
// Enable dataLabels, change its font, make it bold and rotate by 270
value.dataLabels = {enabled:true, style:{'fontSize':'30px', 'fontWeight':'bold'}, rotation: 270};
});
});
}); -
Hi Glenys,
you have to change the variable name at next declaration of next series like below code and also you can change that color too. :)
/******* user configuration **********/
var seriesName = "Revenue";
/*************************************/
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 315
value.dataLabels = {enabled:true, style:{'fontSize':'15px','fontWeight':'bold', 'color':'blue'}, rotation: 315}
})
});
/******* user configuration **********/
var seriesName1 = "Expense";
/*************************************/
widget.on('processresult', function(sender, ev){var data = _.find(ev.result.series, function (ser) {return ser.name == seriesName1}).data
_.each(data, function(value){
//enable dataLabels, change its font, make it bold and rotate by 315
value.dataLabels = {enabled:true, style:{'fontSize':'15px','fontWeight':'bold', 'color':'blue'}, rotation: 315}
})
});
-
Thanks! I have made a note of it. Makes sense. Also screwed around with the code as you can see below to get it to work for multiple series:
/******* user configuration **********/
var seriesNames = ["Waste", "Stars", "Question Marks"];
/*************************************/
widget.on('processresult', function(sender, ev){seriesNames.forEach(function(e, i, a){
var data = _.find(ev.result.series, function (ser) {return ser.name == e}).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}
})
})
}) -
Hi Petro Gonchar,
In order to align the labels, all you need is to add the property 'align' with one of the three values: "right", "left" or "center" to the value.dataLabels object as following:
/******* 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, align:'right'}
})
})Regards,
Lidor
-
Hi,
/******* 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, align:'right'}
})
})
The above code was used to change the value labels size and weight but after using the break by
the above code doesn't work .
HOW TO I SOLVE THIS ISSUE please heLP!!!!!!!!!!! -
Hey Jessica,
You can checkout this plugin that I build that does it:
Best, Elliott
-
Thanks Elliott! Unfortunately, my development team has cracked down on the number of unsupported Sisense plugins we can have on our server.
We are just in need of this feature so the numbers can be read when this is printed out on paper. Currently the numbers that are in the bar are impossible to read if we print in b&w.
-
Hi Jessica,
I do something similar with a bar chart by reducing the bar length via a script. This might work for you?
widget.on('ready', function(se, ev) {
// Parameters
var adjustmentPercent = 1.25;
// Figure out the min/max
var max = null;
var numSeries = se.queryResult.series.length;
for (var i = 0; i < numSeries; i++) {
debugger;
$.each(se.queryResult.series[i].data, function() {
if (!max || max < this.y) {
max = this.y;
}
});
}
debugger;
// adjust based on the delta
var max = (max * adjustmentPercent);
// Set the min/max on the chart
var e = element;
var chart = e.data('hc');
chart.alignTicks = false;
chart.yAxis[0].update({
max: max,
}, true);
});
/*align legend with bars*/
widget.on('processresult',function(se,ev){
var series = ev.result.series;
var numberOfSeries = ev.result.series.length;
for(var i=0;i < numberOfSeries;i++){
series[i].legendIndex = numberOfSeries - i;
}
}) -
Brian & Jessica,
On a bar chart I wish to push the value labels to outside (i.e. right of) the bars consistently and my values for this specific widget are vast ($7 to $143M+). I tried the above, but am a bit novice on how to apply it successfully..
I am also already using the following pieces of code to format the widget for other needs:
widget.on('processresult', function(sender, ev){
widget.on('ready', function(se,ev){
widget.on('render', function(se,ev){
Is there any further advice on the above script you submitted I could get to help figure out how best to complete what I am trying to do?
Any insight from anyone would be greatly appreciated, thanks!!!
Please sign in to leave a comment.
Comments
25 comments