Chart
The Chart shows data as a line or bar chart built from labels and datasets. Use it to visualize a trend or comparison on your site, for example a revenue trend, usage over time, a conversion rate, or a price build-up.
Properties
The properties live in the inspector under the Chart group. Some fields appear only when a condition is met, for example the conditional column only with Formula labels and the conditional line width only for line charts.
Property | What it does | Default |
|---|---|---|
Type | Draws the data as a line or as bars | Line |
Labels | Sets the labels from records or from a formula | Three records: Label 1, Label 2, Label 3 |
Conditional Column | Chooses the column that supplies the labels, from A to Z | Only with Formula labels |
Datasets | Holds the data series, each with a formula, an optional label, and a color | One dataset with formula ARRAY(100, 300, 150) |
Conditional Line Width | Sets the thickness of the chart line, from 0 to 10 | 2 (line charts only) |
Gradient | Fills the chart with a gradient | Not set |
Animation | Animates the chart when it loads | Not set |
Data points | Shows a marker on each data point | Show |
Legend | Shows the legend that names each dataset | Not set |
Vertical labels | Shows the labels along the vertical axis | Show |
Label prefix | Text shown before each label | Empty |
Label postfix | Text shown after each label | Empty |
Min Y axis | Lowest value on the Y axis | Empty |
Max Y axis | Highest value on the Y axis | Empty |
Y axis step size | Distance between grid lines on the Y axis | Empty |
Line tension | How curved the chart line is | Empty |
Logic | Controls when the chart is visible | No logic |
Each dataset needs a formula, and its color defaults to the brand color for the first dataset. The conditional line width applies a px value and only shows for line charts. The conditional column only shows when Labels is set to Formula.
References
References expose the chart's data as values you can use in formulas and other elements.
Value: the chart's value reference, prefixed with CH.
Styling
The Chart can be styled per state and per part of the element.
Style states: Default, Hover.
Named targets: wrapper, grid, vertical-labels, horizontal-labels, tooltip.
Named style: Chart, which is the default.
The Chart has no Site quick styles, and its component styling has no separate empty or error state.
Related articles
UI Elements: overview of the elements.
FormulaScript Overview: using formulas in properties.