Charts

Overview

Chart components allow for visualizing data through a variety of chart styles. The chart system is based on the LiveCharts2 open source library. More details about this library and the chart types that are supported can be found at LiveCharts2.

Supported Charts

The following charts types are supported:

Line Charts

Bar Charts

Pie Charts

Gauge Charts

Schemas

The following schemas describe objects that are used across all chart types.

ChartStyle

key	type	required	description
titleStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the title.
legendStyle	string or Style	optional	Either a style identifier or a style object used to define the text formatting options for the legend. Any layoutOptions in the style are ignored for the legend. For a more detailed explanation of the style system, see Styles.
legendPosition	string	optional	The location for the chart legend. Must be one of: Hidden, Top, Left, Right, or Bottom. Default value is Hidden.
legendBackgroundPaint	Paint	optional	An optional Paint object for drawing the background of the legend.
drawMargin	Padding	optional	Defines the distance from the axes (or edge of the chart if there is no axis) to the draw margin area.
frameFill	Paint	optional	Sets the Paint object to be used to fill the chart frame.
frameStroke	Paint	optional	Sets the Paint object to be used to draw the border of the chart frame.

ChartAxis

key	type	required	description
isVisible	bool	optional	If false, the Axis will not be visible in the chart. Default value is true.
isInverted	bool	optional	If true, the Axis wil be inverted in the chart. Default value is false.
position	string	optional	Indicates the position of the Axis in the chart. Valid options are Start and End. Default value is Start.
labels	string[]	optional	An array of strings that will be used as labels for the Axis. If this value is defined, labelsQuery is ignored.
labelsQuery	string	optional	A JSONata string that will be used to extract labels for the Axis. The return value from the query should be an array of strings.
minStep	number	optional	The Step defines the interval or distance between every separator and label in the axis. Normally, this value is calculated automatically based on the data and size of the chart. This allows the minimum step value to be overridden.
minLimit	number	optional	Controls the visible range of the Axis. If you would like to show a value range of 0 to 100 for the axis, this value should be set to 0. If this value is not set, the minLimit is calculated according to the smallest value in the series data.
maxLimit	number	optional	Controls the visible range of the Axis. If you would like to show a value range of 0 to 100 for the axis, this value should be set to 100. If this value is not set, the maxLimit is calculated according to the largest value in the series data.
forcesStepToMin	bool	optional	If true, forces the axis range steps to the minimum defined value, overriding any calculated values.
name	string	optional	The name of the Axis. As with any other string, string substitution is possible with a JSONata query by using @(QUERY) syntax.
nameStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the axis name.
labelStyle	string or ChartLabelStyle	optional	Either a style identifier or a ChartLabelStyle object used to define the style for the axis labels.

ChartAxisStyle

key	type	required	description
padding	Padding	optional	Padding to add to the chart axis.
separatorsPaint	Paint	optional	A Paint object that describes how Axis separators will be drawn.
subSeparatorsPaint	Paint	optional	A Paint object that describes how Axis sub-separators will be drawn.
ticksPaint	Paint	optional	A Paint object that describes how Axis tick marks will be drawn.
subTicksPaint	Paint	optional	A Paint object that describes how Axis sub-tick marks will be drawn.
zeroPaint	Paint	optional	A Paint object that describes how the zero-line of the Axis will be drawn.
crosshairPaint	Paint	optional	A Paint object that describes how Axis crosshair lines will be drawn.
crosshairLabelsPaint	Paint	optional	A Paint object that describes how Axis crosshair labels will be drawn.
showSeparatorLines	bool	optional	If true, the Axis will show separator lines.
drawTicksPath	bool	optional	If true, the Axis will show tick paths.
crosshairSnapEnabled	bool	optional	If true, crosshair lines will be drawn snapped to axis data values.
separatorsAtCenter	bool	optional	If true, separator lines will be centered at axis data values.
ticksAtCenter	bool	optional	If true, tick marks on the axis will be drawn centered at data values.

ChartSeries

key	type	required	description
name	string	required	The name of the series.
seriesData	ChartSeriesData[]	required	The series data.

ChartSeriesData

key	type	required	description
value	number	required	The data value.
label	string	optional	The data label.

ChartLabelStyle

key	type	required	description
rotation	number	optional	Specifies the amount of rotation in degrees to apply to the label.
polarRotation	string	optional	Used to adjust the angle of the label on Pie and Gauge charts. Must be either tangent or cotangent.
alignment	string	optional	Sets the label horizontal alignment in the chart. Must be one of Start, Middle or End.
vAlignment	string	optional	Sets the label vertical alignment in the chart. Must be one of Start, Middle or End.
position	string	optional	Used to adjust the position of the label. Valid options are: End, Start, Middle, Top, Bottom, Left, and Right.
polarPosition	string	optional	Used to adjust the position of the label. Valid options are: ChartCenter, End, Start, Middle, and Outer. Applies to Pie and Gauge charts only.
translate	Point	optional	Adjusts the label position using x, y coordinates.
padding	Padding	optional	Adds padding around the label.