Apply Custom CSS To Value Labels

[intapiuser]

Use the below script to add CSS attributes to your value labels in Column, Bar, & Line Charts.  The part to modify is the newCss array.  Create an object for each series that you want to format, and specify the index (first, second, third series) along with the CSS attributes you want to apply.

widget.on('processresult',function(s,e){

 //////////////////////////
 // User Input //
 //////////////////////////

 // Define which series (0-indexed) to change, and what the new color is
 var newCss = [
   {
     seriesIndex: 0,
     css: {
       "font-size": "20px",
       "color":"red",
       "line-height": "21px",
       "font-family": '"Arial Black", Gadget, sans-serif',
     }
   }
 ]
 
 ////////////////////////////////
 // Custom Formating Function //
 ////////////////////////////////

 var customFormatter = function(){

   // Lookup the proper css attributes
   var htmlString = "",
       index = this.series._i,
       myItem = e.widget.metadata.panel("values").items[index],
       myMask = $$get(myItem, "format.mask", {}),
       mySeries = $.grep(newCss,function(w){
         return w.seriesIndex == index;
       }),
       css = mySeries.length > 0 ? mySeries[0].css : null;

   // Only run if CSS is defined
   if (css){

     // Start the HTML string
     htmlString = "<tspan style = '"

     // Loop through the css attributes
     for (key in css){
       htmlString += key + ": " + css[key] + "; ";
     }

     // Close the tag
     htmlString += "'>" + maskFormatter(this.y,myMask) + "</tspan>";
   } else {
 
     // Just use the default
     htmlString = "<tspan>" + maskFormatter(this.y,myMask) + "</span>";
   }

   return htmlString
 }

 var maskFormatter = function(value,mask){

   // Get the formatter function
   var formatter = prism.$injector.get('$filter')('numeric');

   return formatter(value,mask) 
 }

 ///////////////////////////////////
 // Get the Series and set Color //
 ///////////////////////////////////

 // Loop through each setting
 $.each(newCss,function(){

   // Get the series for this color
   var mySeries = e.result.series ? e.result.series[this.seriesIndex] : null;
   if (mySeries){
     // Assign the new color
     mySeries.dataLabels = {
       useHTML: true,
       formatter: customFormatter
     }
   }
 })

})