Apply Custom CSS To Value Labels
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
}
}
})
})Updated 03-02-2023
