stylecode
StyleCode is the CSS-like sub-language used to style Envision dashboards. It is written inside { ... } blocks that attach to tiles or their elements. This page explains the generic rules; tile pages describe their specific elements and link to the element property lists.
Table of contents
Syntax and placement
StyleCode blocks can be placed immediately before a show statement, after the tile title, or after a column/series expression inside with.
table T = with
[| as Product, as Qty |]
[| "Hat", 5 |]
[| "Shoe", 2 |]
show table "Orders" { tileColor: "orange/600" } with
T.Product
T.Qty { unit: " pcs" }
Inheritance and elements
StyleCode is hierarchical. Each tile owns element subtrees such as series, column, entry, legend, or axes. Properties defined on a parent element are inherited by its children unless overridden. The authoritative list of elements and their property sets lives in the StyleCode specification:
Tile pages list their supported elements and link to the relevant element entries above.
Values and injection
Most properties accept scalar values such as numbers, booleans, or text. Two injection forms let you drive StyleCode from data:
#(expr)injects a scalar expression.#[expr]injects a data-sized vector for per-row or per-point styling.
table Items = with
[| as Product, as Price |]
[| "Hat", 42.5 |]
[| "Shoe", 19.9 |]
currency = "$"
Items.Color = if Items.Price > 30 then "red" else "green"
show table "Prices" with
Items.Product
Items.Price { unit: #(currency); textColor: #[Items.Color] }
Color values
Color-related properties accept either a hue or a specific color.
Named hues are red, orange, yellow, green, azure, blue, indigo, violet, and pink.
For a shade within a hue, use hue/level where level is between 50 and 900. For a custom hue based on a hex color, use "#RGB/level" or "#RRGGBB/level". For an exact color without automatic adjustments, use the ! suffix.
show label "Hue" { tileColor: orange } with "A"
show label "Shade" { tileColor: "blue/700" } with "B"
show label "Custom hue" { tileColor: "#FC9/500" } with "C"
show label "Exact" { tileColor: "#FC9!" } with "D"
When a hue is provided, the dashboard derives related colors for backgrounds, borders, and hover states. Exact colors bypass that derivation and may require manual tuning for contrast.
Tile placement
Tile placement is controlled by the DashTile properties tilePlacement, tileX, tileY, tileW, and tileH. Use tilePlacement: fixed to lock a tile at a specific grid position; otherwise tiles flow to the next open slot.
table T = with
[| as Name, as Qty |]
[| "A", 3 |]
[| "B", 5 |]
show table "Fixed position" { tilePlacement: fixed; tileX: 2; tileY: 3; tileW: 4; tileH: 2 } with
T.Name
T.Qty