Generic Chart¶

The Generic Chart draws data on two axes: columns, bars, lines, scatter points, ranges and more. Each series has its own data source, so one chart can combine records from more than one query. Use it for anything that compares values or shows them over time, such as monthly revenue as columns with a target line over it.

See also Pie Chart, Data Table and Progress Bar.

Using it¶

The simplest chart is one column series.

Add a data source to the page, for example sales with a month and an amount field.
Drop a Generic Chart onto the page and open Series Configuration.
Add a series. Give it a Name, set Chart Type to Column, and set Data Source to {$data.sales}.
Set X Field to month and Y Field to amount.
Check the result on the Chart preview tab, then click Save. Closing the window without saving discards the series.

The chart now shows one column per month. Add a second series with Chart Type set to Line to draw a target over the columns. The rest of this page lists every setting.

Options¶

Option	Values	Default	Description
Series Configuration	Opens the Series Configuration window	No series	The list of series. Add, copy and remove series there, and check them on the Chart preview tab. See Series options
Chart	See Chart options	None	Plot positioning, grid lines and zero markers
Axes	Per-axis settings	Category X, numeric Y	See Chart options
Legend	See Legend	Shown, centred at the bottom	The legend block
Legend Items	See Legend	Theme default	How each legend entry looks
Tooltip	See Tooltip	Off	What is shown when the visitor hovers over the chart
Color Map	Use Specific Color Map, Color Map Name, Use Distant Colors	Automatic	How series colors are taken from the theme palette. Turn on Use Specific Color Map and name the map in Color Map Name, for example `line`. Use Distant Colors spreads the colors further apart
Variant	Theme variants	Default	Picks the chart's look from the theme. See Variants
Custom Style	CSS for Legend and Legend Items	Empty	Extra styling for the legend
Box Style	Sizing and spacing	Height 200px	The box around the chart

Series options¶

Each series is set up in the Series Configuration window. A series is one set of records drawn in one way: one line, one group of columns, one scatter cloud.

Option	Values	Default	Description
Name	Text or template, e.g. `{$it.record.region}`	None	Required. The label shown in the legend. With Repeat this series, use a template so each copy gets its own name
Legend Entry	On · Off	On	Whether the series appears in the legend. Not available for Swimlane
Chart Type	Bar, Line, Column, Scatter, Range, Marker Line, Range Marker, Swimlane	None	Required. How the series is drawn
Data Source	An expression, e.g. `{$data.items}`	None	The records for this series. Transformation steps can filter, sort and reshape them first
X Field / Y Field	Record fields	`x` / `y`	Which fields are plotted. See Fields by chart type
Secondary X Axis / Secondary Y Axis	On · Off	Off	Draws the series against a second axis on the opposite side. Turning one on adds an X2 or Y2 tab under Axes
Stacked / Stack Name	On · Off, plus a group name	Off	Stacks series that share the same stack name. Works for Line, Bar and Column
Type settings	Depends on Chart Type	None	Extra settings for the chosen type. See Settings by chart type
Appearance	Depends on Chart Type	Automatic	Colors, widths and shapes. See Appearance
Data Labels	Show, Placement, Distance, Anchor, Width, Height, Value Template, Rectangle Style, Text Style	Off	A label on each data point. Value Template is required when labels are shown. Anchor replaces Distance when Placement is Custom
Repeat this series	On · Off, with a Data Source and an Alias	Off	Draws one copy of the series per record of another source. Inside the series, that record is available as `$it.<alias>`. The default alias is `record`
Visible Expression	An expression, e.g. `{$params.showTrend}`	Empty	Under Visibility. The series is drawn only when the expression is true

Fields by chart type¶

Most types plot X Field against Y Field. Some add a base or use two bounds instead.

Chart type	Fields
Line	X Field, Y Field, plus Y0 Field (base) for the bottom of an area
Bar	X Field, Y Field, plus X0 Field (base) for where the bar starts
Column	X Field, Y Field, plus Y0 Field (base) for where the column starts
Scatter	X Field, Y Field
Range, Marker Line	X1 Field, X2 Field, Y1 Field, Y2 Field. Leave a bound empty to span the whole axis

Settings by chart type¶

Chart type	Settings
Line	Line, Area, Hidden Base, Smooth
Bar and Column	Size, Unit (on a time axis), Offset
Scatter	Size Field, Shape, Size
Range Marker	Shape (Min, Max or Line), Cap Size, Inflate
Swimlane	Size, Lane Offset, Vertical, Lane Class

Appearance¶

Auto Color is on by default and takes the next color from the theme palette. Turn it off to pick a Color Index from the palette yourself. Depending on the chart type you can also set line, area, fill and stroke colors, line and stroke width, Border Radius for bars and columns, and Marker Shape and Marker Size for lines.

Chart options¶

These settings belong to the chart as a whole rather than to one series.

Option	Values	Default	Description
Positioning	Top, right, bottom, left	`10 -20 -50 60`	Space between the edge of the widget and the plot area. It leaves room for axis labels
Show Horizontal Grid Lines / Show Vertical Grid Lines	On · Off	On	Grid lines behind the series
Auto Size	On · Off	Off	Sizes and spaces bars and columns on a category axis automatically, so several series fit side by side in each category
Clip Chart Area	On · Off	Off	Cuts off anything drawn outside the plot area
Show X Axis Zero Marker Line / Show Y Axis Zero Marker Line / Show Zero Markers Over Series	On · Off	Off	A line at zero on each axis. The third option draws it on top of the series
Axes	Horizontal and Vertical tabs, plus X2 and Y2 when used	None	Settings for each axis. See Axis settings
Swimlanes	Show, Vertical, Size, Step, Lane Offset, Lane Class	Off	Alternating background bands across the plot
Range Markers	Show, Vertical, Size, Lane Offset, Line Class, Line Style	Off	Chart-wide settings for Range Marker series

Axis settings¶

Each axis tab has the same settings.

Setting	Description
Type	Numeric, Category or Time
Format	How the axis labels are formatted
Min / Max	The range of the axis
Snap to Ticks	Rounds the range to the nearest tick
Label Orientation, rotation, anchor, offset and spacing	How the labels are placed
Tick settings	How ticks are drawn
Invert Axis, Alternate side, Wrap Label, Hide Labels, Hide Line, Hide Ticks	Switches for the axis direction, side and what is drawn

Legend¶

The Legend group controls the legend block. The Legend Items group controls each entry in it.

Option	Values	Default	Description
Hide Legend	On · Off	Off	Hides the legend
Show/Hide series on Legend Click	On · Off	Off	Lets visitors click a legend entry to hide or show its series
Show/Hide path	A state path, e.g. `$vars.chartToggles`	Empty	Remembers which series are hidden
Value Format	A format	None	How values in the legend are formatted
Align, Vertical Align, Vertical Layout	Positions	Centred at the bottom	Where the legend sits and whether it runs down or across
Shape	Circle, Square, Triangle, Line, Bar, Column	Theme default	The marker drawn next to each entry
Shape Size	A number	Theme default	The size of that marker
Item Template	A template, e.g. `{$record.name} ({$record.value:n;2})`	Empty	Rewrites the text of each entry

A tooltip appears when the visitor hovers over a data point.

Option	Values	Default	Description
Enable	On · Off	Off	Turns the tooltip on
Content	Text or Element	Text	Text uses a Title and a Description template. Element lets you build the tooltip from widgets with Edit content...
Placement	Up, Down, Left, Right and the four corners	Automatic	Where the tooltip appears
Mouse Trap	On · Off	Off	Keeps the tooltip open while the mouse is over it
Track Mouse	On · Off	Off	The tooltip follows the cursor
Visible Expression	An expression, e.g. `{$record.value} > 0`	Empty	Shows the tooltip only when the expression is true. This is separate from a series' own Visible Expression

Tips¶

A few things that make charts easier to build.

Each series has its own data source, so one chart can combine records from several queries.
Give several series the same Stack Name to stack them. Leave it empty to draw them side by side.
Field and template inputs suggest the fields of the series' data as you type.
For a part-of-whole breakdown, use a Pie Chart.