All of the style options for the widgets use the same parameters to set the appearance.

fill

The fill parameter sets the fill color, gradient, or image. The fill color can be set using named colors, or hexadecimal or rgb color codes.

To see the gradient parameter at work, see the Barchart Quick Start.

Type: String

Example: {fill: "black"}

fill-opacity

The fill-opacity parameter sets a number that specifies the percentage of opacity of the label text. A value of 0.5 (50%) or less allows you to view grid lines or a background image through the element.

Type: Number

Example: {"fill-opacity": 0.5}

font

The font parameter is a string value that allows you to specify all of the font properties for the label text in one declaration. You can set four properties in the string:

• font-style (normal, italic, oblique)
• font-weight (bold)
• font-size (number of pixels)
• font-family (name: "Verdana" or "Arial", generic: "serif" or "sans-serif")

The values in the string are separated by spaces only, with one exception: separate an alternate value for the font family with a comma.

Type: String

Syntax: "style variant weight size/lineHeight family"

Example: {font: "italic bold 15px Georgia, serif"}

font-family

The font-family parameter is a string that specifies the name or generic font family to use for the text. You can specify a font to use, such as Georgia or Arial, then after a comma, specify a generic font family, such as sans-serif, to use in cases where the named font is not available.

Type: String

Example: {"font-family": "Georgia, serif"}

font-size

The font-size parameter is a numeric value that specifies the font size in pixels.

Type: Number

Example: {"font-size": 20}

font-weight

The font-weight parameter specifies the thickness of the letters.

Type: String

Valid values: normal, bold, bolder, lighter 

Example: {"font-weight": "bolder"}

opacity

The opacity parameter is a number that specifies the percentage of opacity of the element. A value of 0.5 (50%) or less allows you to view grid lines or a background image through the element.

Type: Number

Example: {opacity: 0.5}

stroke

The stroke parameter is a named color, hexadecimal, or RGB color code string that specifies the color to use to outline the element. Note that this can make text thicker, and can look fuzzy on smaller font sizes.

Type: String

Example: {stroke: "purple"}

stroke-dasharray

The stroke-dasharray parameter sets the type of line or border drawn around the border of the element.

Type: String

Valid values: "", "-", ".", "-.", "-..", ". ", "- ", "--", "- .", "--.", "--.."

Example: {"stroke-dasharray": "--.."}

stroke-opacity

The stroke-opacity parameter is a number that specifies the percentage of opacity of the border of the element. A value of 0.5 (50%) or less allows you to view grid lines or a background image through the element.

Type: Number

Example: {"stroke-opacity": 0.5}

stroke-width

The stroke-width parameter is a number that sets the thickness of the border around the element.

Type: Number

Example: {"stroke-width": 4}

transform

An option that adds transformation to an element, but is independent of other attributes. For example, the transform option will not change the x or y axis value.

The syntax transform offers four commands that build on previous commands, plus three alternative absolute translation commands that do not take previous transformations into account.

Type: String

Commands:

• t translate
• r rotate (has optional origin coordinates parameter, default is center)
• s scale (has optional origin coordinates parameter, default is center)
• m matrix (accepts six parameters)

Absolute Translation Commands:

• T translate
• R rotate (has optional origin coordinates parameter, default is center)
• S scale (has optional origin coordinates parameter, default is center)

Example: chartLabelStyle: {transform: "R90T10 0"}

This script uses the transform attribute to rotate the text 90 degress (R90), and to move it 10 pixels (T10) from the origin (0).