Widgets

The following is the Widget Custom Style editor. From here, you can set a Custom Style for the Widget.

Property	Accepted values	Behavior
color	Named colors. Hex colors. RGB, RGBA. HSL, HSLA.	Sets the text color.
backgroundColor	Any color	Applies solid colors as background on an element.
background		Sets all background style properties at once, such as color, image, origin, size, or repeat method. Component properties not set in the background shorthand declaration are set to their default values.
borderColor	Any color inherit	Sets the color of an element's four borders.
borderRadius	Numeric value	Gives any element rounded corners.
borderStyle	solid. none. hidden. dashed. dotted. double. groove. ridge. inset. outset.	Specifies the type of line drawn around the element.
borderWidth	Numeric values: px, em, rem, vh and vw units. Thin: The equivalent of 1px. Medium: The equivalent of 3px. Thick: The equivalent of 5px.	Specifies the thickness of the border.
header	A JSON object containing the following properties, along with valid values for each one: color backgroundColor fontWeight boxShadow borderRadius borderStyle borderWidth	Specifies the properties of the selected header.
fontSize	Keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Length units: mm, cm, in, pt, pc, em, rem, px. Percentages.	Specifies the size, or height, of the font.
fontFamily	Family name. Generic family name.	Defines the font applied to the selected element.
boxShadow	Horizontal offset (required): positive or negative number Vertical offset (required): positive or negative number Blur radius (required): positive number Spread radius (optional): positive or negative number Color (required): named colors, hex, RGB, RGBA, HSL and HSLA.	Puts shadows on elements
fontWeight	Keywords: normal, bold, bolder, lighter. Predefined numeric values: 100, 200, 300, 400, 500, 600, 700, 800, 900.	Sets the weight, or thickness, of a font.

• Any accepted value other than a number must be wrapped in double quotes as a string.

• Setting any of these properties overrides the value inherited from the Dashboard.

• Setting any of these properties prevents the Widget Custom Style from being modified at the Dashboard level.

Examples

Example 1: Set a Widget's header Custom Style

Let's give a metric widget a Custom Style with the following changes:

• Rounded corners with a border radius of 10

• An outset border style

• A bluish background color

• White font color

• A border width of 1

The following JSON defines that Custom Style:

{
    "color": "#FFFFFF",
    "header": {
        "color": "#FFFFFF",
        "backgroundColor": "#165a72",
        "borderStyle": "dotted"
    },
    "fontSize": 14,
    "borderRadius": 15,
    "backgroundColor": "#000000"
}

To apply the dotted border to the whole Widget, move "borderStyle": "dotted" from the header section to the root. You must also set the borderWidth property for the border to display correctly:

{
    "color": "#FFFFFF",
    "header": {
        "color": "#FFFFFF",
        "backgroundColor": "#165a72"
    },
    "fontSize": 14,
    "borderColor": "white",
    "borderStyle": "dotted",
    "borderRadius": 15,
    "borderWidth": 5,
    "backgroundColor": "#000000"
}

This is the Widget with no Custom Style applied:

This is the same Widget after applying the Custom Style above:

Example 2: Set a Widget's Body Custom Style

Let's modify the Widget body for the metric widget above. Set the following properties:

• Black font color

• Font size to 20

• Border radius to 10

• Background color to #38b01e

• Box shadow to 30px -8px teal

The following JSON defines that Custom Style:

{
    "color": "black",
    "header": {
        "color": "white",
        "borderStyle": "outset",
        "borderWidth": 1,
        "borderRadius": 10,
        "backgroundColor": "#10435b"
    },
    "fontSize": 20,
    "borderRadius": 10,
    "backgroundColor": "#38b01e",
    "boxShadow": "30px -8px teal"
}

After applying the Custom Style above, the Widget looks like this:

Example 3: Using linear gradient background

Let's use the previous metric Widget again for this example. Instead of a flat green background color, use a linear gradient.

Set the background property to linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c) as shown below:

This is the resulting widget:

You can also use the background property in the widget header, as shown below:

{
    "color": "black",
    "header": {
        "color": "white",
        "borderStyle": "outset",
        "borderWidth": 1,
        "borderRadius": 10,
        "background": "linear-gradient(to left, #333, #333 50%, #eee 75%, #333 75%)"
    },
    "fontSize": 20,
    "borderRadius": 20,
    "background": "linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c)",
    "boxShadow": "30px -8px teal"
}