After publishing a widget, we can access it's attributes to further modify it to our requirements.
Step 1 - Find the Widget title
Named 'widgettitle' from the browser's console, by adding a 'debugger' to the this.initializing of the dashboard. In the top <div> you can find the widget name.
Step 2 - Change The Script
Add the following lines to the dashboard's this.initializing
In this case, we're modifying a round scale named 'ValRatio', we'll be changing the background color from the default gray to light blue.
Note that the hex code for light blue is #66CCFF.
var x = args.dashboard.findWidgets({ title: 'ValRatio' })[0];
$("#" + x.tempContainerInstance._widgetPanelContainerID).css({'background': "#66CCFF"});
Using anyone of the following attributes, you can change and add the required values;colors,fonts,sizes, and so on.
This is a list of attributes which we can modify for the example of a round scale:
background: "#eeeeee"
border-color: "#287aa6"
border-style: "solid"
color: "#656565"
fontFamily: "Tahoma"
fontSize: "8.25pt"
text-align: "center"
