Show Numbers on Chart

Questions
#1

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

#2

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. 

#3

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

#4

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 :frowning:


#5

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:

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


Thanks,

Bill   

#6

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

#7

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

#8

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}'; <br>