High Charts API and UI-Only Formula Fields

  • 1
  • Problem
  • Updated 3 years ago
  • Solved
Been playing around with the highcharts API to show the numbers on top of bars/columns instead of having users hover (see inline snippet below) and so far, this has worked great. 
The only issue is when using this inline snippet on a UI-Only formula field, it goes all-out with digits.  Any ideas?

The image below is taken with a UI-Only formula field that has a length of 4 and 2 decimal points.  

Here is the formula if it matters: 

IF({{Core_License_Count__c}}<1,0,({{ACV__c}}/{{Core_License_Count__c}}))





Here is the inline Snippet
var chartObj = arguments[0],

	$ = skuid.$;


$.extend(true, chartObj.plotOptions,{

        bar: {

            dataLabels: {

                enabled: true,
                format: "{y}",
                
                    
                    

            }

        }
        
        
        
        
        

});

$.extend(true, chartObj.plotOptions,{

        areaspline: {

            dataLabels: {

                enabled: true,
                format: "{y}",
                
                    
                    

            }

        }
        
        
        
        
        

});

$.extend(true, chartObj.plotOptions,{

        funnel: {

            dataLabels: {

                enabled: true,
                format: "${y} in {point.name}",
                
                    
                    

            }

        }
        
        
        
        
        

});

$.extend(true, chartObj.plotOptions,{

        column: {

            dataLabels: {

                enabled: true,
                format: "${y}",
                
                    
                    

            }

        }
        
        
        
        
        

});

$.extend(true, chartObj.plotOptions,{

        pie: {

            dataLabels: {

                enabled: true,
 format: "{point.name} {y}",

            }

        }
        
        
        
        
        

});

$.extend(chartObj,{

    tooltip: {

        enabled:false

    }    

});
Photo of Mansour

Mansour

  • 1,932 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Mansour...you can adjust your 'format' statement and provide a number format.  Here is an example:

Two decimal places: "{point.y:.2f}" [Demo]
    Thousands separator, no decimal places: {point.y:,.0f} [Demo]
    Thousands separator, one decimal place: {point.y:,.1f} [Demo, internationalized]

    var params = arguments[0],
	$ = skuid.$;
    params.plotOptions.series.dataLabels = {
    enabled: true,
    format: '<b>{point.y:,.0f}</b>',
    };
Photo of Mansour

Mansour

  • 1,932 Points 1k badge 2x thumb
That worked like a charm.  Thank you so much Bill!