Changing Value Label's Font Size, Weight and Rotation

Comments

24 comments

  • Avatar
    Sanjoy Ghosh

    Hi Douglas,

                             This piece of code is working fine but rotation is not working for me.

    regards

    Sanjoy

    0
    Comment actions Permalink
  • Avatar
    Douglas

    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.

    0
    Comment actions Permalink
  • Avatar
    Zac

    What about text wrapping?

    0
    Comment actions Permalink
  • Avatar
    Zac

    Worthy hack? http://jsfiddle.net/ahwmv/2/

    0
    Comment actions Permalink
  • Avatar
    Ori Sandler

    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};
    });
    });
    });

    1
    Comment actions Permalink
  • Avatar
    Glenys Salas

    Hey!  This is awesome.  How do i get it to work for multiple series?

    0
    Comment actions Permalink
  • Avatar
    ganesh dixit (Edited )

    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}
    })
    })

    ;

    0
    Comment actions Permalink
  • Avatar
    Glenys Salas

    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}
    })
    })
    })

    0
    Comment actions Permalink
  • Avatar
    Petro Gonchar

    Hi! Is it possible to align value labels to right/center?

    0
    Comment actions Permalink
  • Avatar
    Aero IC

    Hi guys, i need to make changes collapsible tree plugin like

    1.Rotate the label name

    2.According to the value node size should vary 

    3.And need to reorder the node

    Please help me on these things.

    0
    Comment actions Permalink
  • Avatar
    Lidor Rosencovich

    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

    0
    Comment actions Permalink
  • Avatar
    Ayanda Dube

    How can I make this work on a classic break by?

     

    0
    Comment actions Permalink
  • Avatar
    Yong Kim

    For Pie chart values how can I format an integer that represents seconds such as 9999 as HH:MI:SS using the Edit Script and Javascript?

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    I don't see font Color on here, what would be the selector for font color

    0
    Comment actions Permalink
  • Avatar
    Delsaran Bigglesworth

    I see it. Nevermind

    0
    Comment actions Permalink
  • Avatar
    Sijo George

    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!!!!!!!!!!!

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    Is there a way to format the value labels so they always appear above the columns?

    0
    Comment actions Permalink
  • Avatar
    Elliott Herz

    Hey Jessica,

    You can checkout this plugin that I build that does it:

    https://support.sisense.com/hc/en-us/community/posts/360020822513-Custom-Bar-Column-Chart-Plugin-Show-Totals-Sort-Categories-Sort-Breakbys-

    Best, Elliott

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    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.

    0
    Comment actions Permalink
  • Avatar
    Brian Wilson

    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;
    }
    })
    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    Brian,

    This worked, thank you!!

    0
    Comment actions Permalink
  • Avatar
    Jeffrey Sanda

    This works, thanks.

    However, if you are using a pie chart and click through to the Others subgroup, you lose the formatting. My only guess is that Others has a different seriesName? Could it be something else?

    0
    Comment actions Permalink
  • Avatar
    Jessica Orlando

    Today I noticed the script that puts the values above the bars is now causing the dashboard to error out when downloading the dashboard to PDF. Has anyone else noticed this?

    0
    Comment actions Permalink
  • Avatar
    Anthony Nater

    I can't get the code to work on a line graph in version 7.3.    I copy/pasted exactly as is and updated the "yourMeasure" portion correctly. 

     

    Any insight? 

    0
    Comment actions Permalink

Please sign in to leave a comment.