Perspective - XY Chart

Component Palette Icon

The XY Chart displays data trends. It provides a flexible way to display either timeseries or X-Y data by entering data in the dataSources property. It is fully customizable in its appearance, from labels, colors, line widths, legend, scroll bars, and text styles.

Properties

Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

Name	Description	Property Type
dataSources	The data source objects used to populate the chart. Each data source contains an array of records used by axes and series configurations. When using a date or time x-axis, the data must be sorted in ascending timestamp order.	Object
title	The configuration for the chart title. text: The text displayed as the chart title. appearance: The configuration settings that control the visual styling of the title. color: The color of the title text. font: The font settings applied to the title text. size: The font size of the title text in pixels or points. weight: The font weight of the title text. padding: The spacing around the title. top: The padding above the title. bottom: The padding below the title. left: The padding to the left of the title. right: The padding to the right of the title.	Object
subtitle	The configuration for the chart subtitle. text: The text displayed as the chart subtitle. appearance: The configuration settings that control the visual styling of the subtitle. color: The color of the subtitle text. font: The font settings applied to the subtitle text. size: The font size of the subtitle text in pixels or points. weight: The font weight of the subtitle text. padding: The spacing around the subtitle. top: The padding above the subtitle. bottom: The padding below the subtitle. left: The padding to the left of the subtitle. right: The padding to the right of the subtitle.	Object
legend	The configuration for the chart legend. enabled: Enables the display of the legend. position: The position of the legend relative to the chart. absolute: The position of the legend when using absolute placement. x: The horizontal position of the legend. y: The vertical position of the legend. markers: The configuration settings for legend markers. enabled: Enables markers in the legend. width: The width of each marker in pixels. height: The height of each marker in pixels. mirrorLookOfSeries: Determines whether markers match the appearance of the associated series. stroke: The stroke settings for marker outlines. color: The stroke color of the marker. width: The stroke width in pixels. opacity: The stroke opacity from 0 to 1. cornerRadius: The corner radius applied to markers. topLeft: The top-left corner radius. topRight: The top-right corner radius. bottomLeft: The bottom-left corner radius. bottomRight: The bottom-right corner radius. icon: The icon configuration for legend markers. path: The icon path in the format library/iconName. color: The color of the icon. verticalCenter: The vertical alignment of the icon. horizontalCenter: The horizontal alignment of the icon. width: The width of the icon in pixels. height: The height of the icon in pixels. labels: The configuration settings for legend labels. text: The template string applied to legend labels. font: The font settings applied to legend labels. weight: The font weight of the label text. size: The font size of the label text. color: The color of the label text.	Object
cursor	The configuration for the chart cursor. enabled: Enables cursor interactions on the chart. series: The series that the cursor is bound to. lineX: The configuration settings for the X axis cursor line. enabled: Enables the X axis cursor line. stroke: The stroke settings for the X axis cursor line. color: The color of the cursor line. width: The width of the cursor line in pixels. opacity: The opacity of the cursor line from 0 to 1. dashArray: The dash pattern used to render the cursor line. lineY: The configuration settings for the Y axis cursor line. enabled: Enables the Y axis cursor line. stroke: The stroke settings for the Y axis cursor line. color: The color of the cursor line. width: The width of the cursor line in pixels. opacity: The opacity of the cursor line from 0 to 1. dashArray: The dash pattern used to render the cursor line. enableTransitions: Enables transition animations for cursor interactions.	Object
enableTransitions	Enables transition animations. The default value is false.	Boolean
scrollBars	The configuration for the chart scrollbars. horizontal: The configuration settings for the horizontal scrollbar. enabled: Enables the horizontal scrollbar. series: The series associated with the horizontal scrollbar. vertical: The configuration settings for the vertical scrollbar. enabled: Enables the vertical scrollbar. series: The series associated with the vertical scrollbar.	Object
selection	New in 8.1.10 The configuration for selecting data points. Data points can be selected when series[x].render is set to column, candlestick, or line with bullets enabled. enabled: Enables selection of bullets, columns, and candlesticks. data: The array of currently selected data points. selectedHighlightColor: The highlight color applied to selected data points.	Object
background	The configuration for the chart background. render: The background render mode. gradient: The configuration settings for gradient backgrounds. stops: The gradient stop definitions. color: The color of each gradient stop. opacity: The opacity of each gradient stop from 0 to 1. rotation: The rotation angle of the gradient. color: The background color when using a solid fill. opacity: The background opacity from 0 to 1.	Object
xAxes	The configuration for X axes. See the X Axes Properties section below for more details.	Array
yAxes	The configuration for Y axes. See the Y Axes Properties section below for more details.	Array
series	The array of series configurations applied to the chart. See the Series Properties section below for more details.	Array
style	The style configuration for this component. A full menu of style options is available. You can also specify a style class.	Object

Axes Properties

Axes define how data is mapped and displayed on the chart. Each axis configuration controls scaling, labeling, formatting, and visual presentation. Multiple axes can be defined and referenced by series to control how data is rendered.

xAxes[x] Properties

Name	Description	Property Type
name	A unique name used to identify this axis configuration. This value is required for series configuration.	String
label	The configuration for the axis label. enabled: Enables a label displayed alongside the axis. text: The text displayed for the axis label. color: The color of the axis label text.	Object
inversed	Determines whether the axis scale is inverted, reversing the direction of values.	Boolean
visible	Controls the visibility of the axis.	Boolean
tooltip	The configuration for the axis tooltip. enabled: Enables tooltips for the axis. text: The tooltip text as a format string. cornerRadius: The corner radius of the tooltip. pointerLength: The length of the tooltip pointer in pixels. background: The background settings for the tooltip. color: The background color of the tooltip. opacity: The background opacity from 0 to 1.	Object
render	The axis type to render. Options include category, date, or value. The default value is date.	String
category	The configuration for category axis breaks. enabled: Enables a category break range. startCategory: The starting category of the break. endCategory: The ending category of the break. size: The size of the break as a decimal percentage of removed values.	Object
date	The configuration for date-based axes. baseInterval: The base interval settings for the axis. enabled: Enables base interval configuration for the axis. timeUnit: The base time unit. count: The number of time units per interval. skipEmptyPeriods: Removes empty time units from display. This setting may affect performance and overrides axis break behavior when enabled. range: The range settings for the axis. max: The maximum date in the range as a Unix timestamp in milliseconds. min: The minimum date in the range as a Unix timestamp in milliseconds. useStrict: Strictly enforces the configured date range. break: The formatting settings for date values. inputFormat: The date format of values provided by the data source. format: The date format used to display axis labels.	Object
value	The configuration for value-based axes. range: The range settings for the axis. max: The maximum numeric value in the range. min: The minimum numeric value in the range. useStrict: Strictly enforces the configured value range. logarithmic: Uses logarithmic scaling for the axis, which is useful when values vary significantly. break: The configuration for value breaks. enabled: Enables a value break range. startValue: The starting value of the break. endValue: The ending value of the break. size: The size of the break as a decimal percentage of removed values. format: The number format applied to axis values.	Object
appearance	The configuration for the visual appearance of the axis. opposite: Renders the axis on the opposite side of the chart. inside: Renders axis labels on the inside of the axis. labels: The label styling configuration. color: The color of the axis labels. opacity: The opacity of the axis labels from 0 to 1. rotation: The rotation of the labels in degrees. wrap: Wraps the label text. New in 8.1.14 verticalCenter: The vertical alignment of the label. New in 8.1.14 horizontalCenter: The horizontal alignment of the label. grid: The grid line styling configuration. color: The color of the grid lines. opacity: The opacity of the grid lines from 0 to 1. dashArray: The dash pattern used to render grid lines. minDistance: The minimum distance between grid lines in pixels. position: The relative position of grid lines from 0 to 1. font: The font settings applied to axis labels. size: The font size used for axis labels. weight: The font weight used for axis labels.	Object

yAxes[x] Properties

Name	Description	Property Type
name	A unique name used to identify this axis configuration. This value is required for series configuration.	String
label	The configuration for the axis label. enabled: Enables the axis label. text: The text displayed for the axis label. color: The color of the axis label text.	Object
inversed	Determines whether the axis scale is inverted.	Boolean
visible	Controls the visibility of the axis.	Boolean
tooltip	The configuration for the axis tooltip. enabled: Enables the tooltip. text: The tooltip text as a format string. cornerRadius: The corner radius of the tooltip. pointerLength: The length of the tooltip pointer in pixels. background: The background settings for the tooltip. color: The background color of the tooltip. opacity: The background opacity from 0 to 1.	Object
render	The axis type to render. Options include category, date, or value. The default value is date.	String
category	The configuration for category axis breaks. enabled: Enables a category break range. startCategory: The starting category of the break. endCategory: The ending category of the break. size: The size of the break as a decimal percentage of removed values.	Object
date	The configuration for date-based axes. baseInterval: The base interval settings for the axis. enabled: Enables base interval configuration. timeUnit: The base time unit. count: The number of time units per interval. skipEmptyPeriods: Removes empty time units from display. range: The range settings for the axis. max: The maximum date in the range as a Unix timestamp in milliseconds. min: The minimum date in the range as a Unix timestamp in milliseconds. useStrict: Strictly enforces the configured range. break: The formatting settings for date values. inputFormat: The date format of values provided by the data source. format: The date format used to display axis labels.	Object
value	The configuration for value-based axes. range: The range settings for the axis. max: The maximum numeric value in the range. min: The minimum numeric value in the range. useStrict: Strictly enforces the configured range. logarithmic: Uses logarithmic scaling for the axis. break: The configuration for value breaks. enabled: Enables a value break range. startValue: The starting value of the break. endValue: The ending value of the break. size: The size of the break as a percentage of removed values. format: The number format applied to axis values.	Object
appearance	The configuration for the visual appearance of the axis. opposite: Renders the axis on the opposite side of the chart. inside: Renders axis labels on the inside of the axis. labels: The label styling configuration. color: The color of the labels. opacity: The opacity of the labels. rotation: The rotation of the labels. wrap: Wraps the label text. New in 8.1.14 verticalCenter: The vertical alignment of the label. New in 8.1.14 horizontalCenter: The horizontal alignment of the label. grid: The grid line styling configuration. color: The color of the grid lines. opacity: The opacity of the grid lines. dashArray: The dash pattern used to render the grid lines. minDistance: The minimum distance between grid lines. position: The relative position of the grid lines. font: The font settings applied to axis labels. size: The font size of the labels. weight: The font weight of the labels.	Object

series[x] Properties

Each series defines how data from a data source is rendered on the chart, including axis mapping, appearance, and interaction behavior.

Name	Description	Property Type
name	A unique name used to identify this series.	String
label	The configuration for the series label. text: The text displayed for this series in the legend.	Object
visible	Enables series visibility. The default value is true.	Boolean
hiddenInLegend	Determines whether the series is hidden from the legend. The default value is false.	Boolean
defaultState	The default visibility state of the series. visible: Determines whether the series is visible by default.	Object
data	The data configuration for the series. source: The name of the data source used by this series. x: The field or index used for X values. y: The field or index used for Y values.	Object
xAxis	The name of the X axis used by this series.	String
yAxis	The name of the Y axis used by this series.	String
zIndex	The stacking order of the series relative to other series.	Numeric
tooltip	The configuration for the series tooltip. enabled: Enables the tooltip. text: The tooltip text as a format string. cornerRadius: The corner radius of the tooltip. pointerLength: The length of the tooltip pointer in pixels. background: The background settings for the tooltip. color: The background color of the tooltip. opacity: The background opacity from 0 to 1.	Object
render	The rendering mode for the series. Options include candlestick, column, line, or stepLine, each of which exposes its own configuration object below. The default value is line.	String
candlestick	Available when render is set to candlestick. The configuration for candlestick-based series rendering. open: The configuration for open values. x: The field used for open X values. y: The field used for open Y values. high: The configuration for high values. x: The field used for high X values. y: The field used for high Y values. low: The configuration for low values. x: The field used for low X values. y: The field used for low Y values. appearance: The visual configuration for candlesticks. fill: The fill settings. color: The fill color of the candlestick. opacity: The fill opacity from 0 to 1. stroke: The stroke settings. color: The stroke color. opacity: The stroke opacity from 0 to 1. width: The stroke width in pixels. stacked: Determines whether the candlestick series is stacked. deriveFieldsFromData: Derives appearance values from the data source. fill: The derived fill settings. stroke: The derived stroke settings. heatRules: The configuration for heat rules. enabled: Enables heat rules. max: The maximum color value. min: The minimum color value. dataField: The data field used for heat rule calculations.	Object
column	Available when render is set to column. The configuration for column-based series rendering. open: The configuration for open values. x: The field used for open X values. y: The field used for open Y values. appearance: The visual configuration for columns. fill: The fill settings. color: The fill color of the column. opacity: The fill opacity from 0 to 1. stroke: The stroke settings. color: The stroke color. opacity: The stroke opacity from 0 to 1. width: The stroke width in pixels. width: The width of the column. height: The height of the column. stacked: Determines whether the column series is stacked. deriveFieldsFromData: Derives appearance values from the data source. fill: The derived fill settings. stroke: The derived stroke settings. heatRules: The configuration for heat rules. max: The maximum color value. min: The minimum color value. dataField: The data field used for heat rule calculations.	Object
line	Available when render is set to line. The configuration for line-based series rendering. open: The configuration for open values. x: The field used for open X values. y: The field used for open Y values. appearance: The visual configuration for the line. connect: Connects the line over empty data points. The default value is true. tensionX: The horizontal tension of the line. Range is 0 to 1, where 1 produces straight segments between points and 0 produces maximum curvature. The default value is 1. tensionY: The vertical tension of the line. Range is 0 to 1. The default value is 1. minDistance: The minimum distance in pixels between two rendered points. The default value is 0.5. stroke: The stroke settings. width: The stroke width in pixels. The default value is 3. opacity: The stroke opacity from 0 to 1. color: The stroke color. dashArray: The dash pattern used to render the stroke. fill: The fill settings for the area under the line. color: The fill color. opacity: The fill opacity from 0 to 1. bullets: The array of bullet configurations rendered at each data point. enabled: Enables bullets. render: The bullet type. Options are circle or label. width: The bullet width. height: The bullet height. rotation: The bullet rotation in degrees. label: The label settings for the bullet. fill: The fill settings for the bullet. stroke: The stroke settings for the bullet. tooltip: The tooltip settings for the bullet. deriveFieldsFromData: Derives bullet appearance values from the data source. heatRules: The configuration for heat rules applied to bullet appearance.	Object
stepLine	Available when render is set to stepLine. The configuration for step line-based series rendering. open: The configuration for open values. x: The field used for open X values. y: The field used for open Y values. appearance: The visual configuration for the step line. connect: Connects the line over empty data points. The default value is true. tensionX: The horizontal tension of the line. Range is 0 to 1. The default value is 1. tensionY: The vertical tension of the line. Range is 0 to 1. The default value is 1. minDistance: The minimum distance in pixels between two rendered points. The default value is 0.5. stroke: The stroke settings. width: The stroke width in pixels. The default value is 3. opacity: The stroke opacity from 0 to 1. color: The stroke color. dashArray: The dash pattern used to render the stroke. fill: The fill settings for the area under the line. color: The fill color. opacity: The fill opacity from 0 to 1. bullets: The array of bullet configurations rendered at each data point. enabled: Enables bullets. render: The bullet type. Options are circle or label. width: The bullet width. height: The bullet height. rotation: The bullet rotation in degrees. label: The label settings for the bullet. fill: The fill settings for the bullet. stroke: The stroke settings for the bullet. tooltip: The tooltip settings for the bullet. deriveFieldsFromData: Derives bullet appearance values from the data source. heatRules: The configuration for heat rules applied to bullet appearance.	Object

Component Events

Perspective Component Events The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.