Show Numbers on Chart

  • 1
  • Question
  • Updated 8 months ago
  • Answered
Hi,

looked in forum but could not find similar question

I want to show the numbers directly in chart, so used the setting in 'Styling tab' to show Data Labels, but I have 2 questions regarding results

1) Instead of the numbers coming out properly rounded and in currency format (like on hover) they come out un-formatted. Example 129,065.35999999999 . Any way to show it like on hover? $129,065

2) I would like to know if there is a way to remove the label when it's 0. I would rather see blank when that is the case


Thx
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I'm pretty sure that the chart is just rendering your data.  So you might want to build a UI only field that rounds your data. 

Not showing 0 may be harder if you really want those months to show in your axis.  At this point I think you are stuck with a before render snippet. 
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
If you're using a UI-Only field to make your values look pretty, you could make a second UI-only field that is a formula that renders as text and looks something like
IF({{Value__c}}==0,'',{{UiFieldName}})
Where UiFieldName is the Ui-only field you created to round your numbers
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you both,

But how would Ui-field help?

The data itself is properly formatted

In this example I showed above, for July 2015 i have 2 statements. 
1 with amount of 63,076.60 in SF Currency field (16,2)
the other with amount 65,988.76 in SF Currency field (16,2)

total for july: $129,065,36


How would adding those 2 come up with all those decimals? if was a division i would understand, but it's a simple addition....

And as the field are properly formatted before the chart "sums them up" not sure UI would help...


As for Jack's answer, I tried but it still renders 0 when blank :(
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Dave,

We have used a before render snippet to hide the '0' values and you can also format the number of decimals that show.  Here is an example:

    var params = arguments[0],
        $ = skuid.$;
   params.plotOptions.column.dataLabels = {
        enabled: true,
        //this formatter function will hide values less than 1
        formatter: function() {
            var val = this.y;
            if (val < 1) {
                return '';
            }
            return val;
        },
        verticalAlign: 'top',
        y: -20
    };
    
    //Set the number of decimal places for the labels
    params.plotOptions.column.dataLabels.format = '{y:.0f}';

Thanks,

Bill   
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Thanks for this code Bill. I have a chart that users sometimes render as a column sometimes as a line, but in either case there are two other series that are rendered always as lines. I'm trying to figure out how to add the data labels just to the main series. The code above works great for in column view, just the columns have the data labels. Do you know how I would render the data labels just for highcharts-series-0 (the first series) ?
(Edited)
Photo of Jack Sanford

Jack Sanford, Champion

  • 8,322 Points 5k badge 2x thumb
Here's how to add datalabels just to the first series (replace series[0] with the series number to do any particular series)
var params = arguments[0],
        $ = skuid.$;
   
    params.series[0].dataLabels = {
        enabled:true
      //  ,index:-1
    };
    
    //Set the number of decimal places for the labels
    params.series[0].dataLabels.format = '{y:.1f}';
    
Photo of Dave

Dave

  • 5,538 Points 5k badge 2x thumb
Thank you Bill,

that is exactly what i'm looking for, but for some reason the 0's are not hiding and only change i can see is that the '0' value just moved up in the chart.

Here's results (in yellow) after i applied snippet:


And here how they were without snippet



Any idea what i'm doing wrong?

I even tried changing value of the '  y: -20 'part of snippet, and it would move the all the numbers (even those not 0) up or down, but not hide

Thx