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" }
Global blocks
Use @{ ... } to target the dashboard itself rather than a specific tile.
@{ dashTitle: "Quarterly Review"; dashButtonKind: "none" }
show scalar "Units" with 42
This global StyleCode block is not attached to a show statement. It is used
for dashboard-level properties such as dashTitle, dashButton,
dashButtonKind, or defaultTab.
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.
Nested selectors
Nested StyleCode selectors target child elements within the tile hierarchy.
Region header { ... } and footer { ... } selectors are examples, but the
same pattern already exists for selectors such as header, value, legend,
haxis, vaxis, left, and right.
table Orders = with
[| as Product, as Qty, as Color |]
[| "Hat", 5, "blue" |]
[| "Shoe", 2, "green" |]
show table "Orders" with
Orders.Product { header { textBold: true } }
Orders.Qty { value { textColor: #[Orders.Color] } }
The header { ... } selector styles the column header. The value { ... }
selector styles the cells of the same column.
keep span date = [date(2024, 1, 1) .. date(2024, 1, 5)]
Day.Sales = 10 + dayNum(date)
Day.Forecast = Day.Sales + 2
show linechart "Sales" { legend { legendPosition: "left" } ; vaxis { left { axisMax: 20 } } } with
Day.Sales
Day.Forecast
The legend { ... } selector targets the legend. The nested
vaxis { left { ... } } selector goes further down the hierarchy and styles the
left vertical axis only.
summary = show region { ..2, ..12 ; header { blockColor: orange } } with
header "Yearly Revenue"
footer "Reviewed weekly"
show scalar "2024" { .., ..2 in summary } with 13370
show scalar "2025" { .., 4..5 in summary } with 42000
In this example, header { blockColor: orange } styles the region header.
The header "..." and footer "..." statements provide the visible texts,
which populate the blockTitle of the corresponding selectors. See
region for the layout-specific rules.
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 }
show label "Shade" { tileColor: "blue/700" }
show label "Custom hue" { tileColor: "#FC9/500" }
show label "Exact" { tileColor: "#FC9!" }
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