Search

User Manual

Getting Started


Modules and Platform


Appendix


Tutorials & Helpful Tricks


Glossary


Strategic Partner Links

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

Resources

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

All Manual Versions

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata

General

Component Palette Icon:




IULocgo


XY Chart

Description

The XY Chart displays data trends. It provides a flexible way to display either timeseries or X-Y charts that are powered by any number of datasets, entered in the dataSources property. It is fully customizable in its appearance, from labels, colors, line widths, legend, scroll bars, text styles, and more.

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.

NameDescriptionProperty Type
dataSourcesObjects that are the data source for the chart.array
titleChart title.value: string
legend

Settings for the chart legend. Options as follows:

NameDescriptionProperty Type
enabled Whether the legend is enabled for this chart. Default is true (enabled).value: boolean
position Where the legend is located in relation to the chart (left, right, top, or bottom). Default is bottom.value: string dropdown
object
cursor

Settings for the chart cursor.

 Click here to see the cursor properties
NameDescriptionProperty Type
enabledWhether the cursor is enabled for this chart. Default is true (enabled).value: boolean
positionWhere the legend is located in relation to the chart (left, right, top, or bottom). Default is bottom.value: string dropdown
lineX

The chart cursor configuration for the line that intersects the X axis. Options as follows:

NameDescriptionProperty Type
enabled Enables the lineX cursor.value: boolean
stroke

Settings for the stroke. Options as follows:

NameDescriptionProperty Type
colorCursor line stroke color. See Color Selector.color
widthCursor line stroke widthvalue: numeric
opacityCursor line opacity. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".array
object
object
lineY

The chart cursor configuration for the line that intersects the Y axis. Options as follows:


NameDescriptionProperty Type
enabledEnables the lineY cursor.value: boolean
stroke

Settings for the stroke. Options as follows:

NameDescriptionProperty Type
colorCursor line stroke color. See Color Selector.color
widthCursor line stroke widthvalue: numeric
opacityCursor line opacity. 0 is fully transparent, 1 is fully opaque.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".array
object
integer
object
enableTransitionsWhether the transition animations are enabled for this chart. Default is false (disabled).boolean
scrollBars

Configuration for the scroll bars on the chart. Options as follows:

 Click here to see the scrollBars properties
NameDescriptionProperty Type
horizontal

Settings for horizontal scrollbars. Options as follows:

NameDescriptionProperty Type
enabled Whether the horizontal scrollbar is enabled for this chart. Default is true (enabled).value: boolean
series Binds the horizontal scroll bar to a series.array
object
vertical

Settings for vertical scrollbars. Options as follows:

NameDescriptionProperty Type
enabledWhether the vertical scrollbar is enabled for this chart. Default is true (enabled).value: boolean
seriesBinds the vertical scroll bar to a series.array
object
object
background

Configuration for the background of the chart. Options as follows:

 Click here to see the background properties
NameDescriptionProperty Type
renderSets the render mode for the chart background. Options are none, gradient, or color. Default is none.value: string dropdown
gradient

Sets the gradient configuration for the chart background. Options are:

NameDescriptionProperty Type
direction Sets the direction of the gradient. Options are linear or radial.value: string dropdown
rotation Gradient rotation. Applies only to the linear gradient. Default is 0.value: numeric
color

Colors to be used in the gradient

array
object
colorColor to be used in background if color property is set under render. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value.color
opacityOpacity of background of the chart. 0 is fully transparent, 1 is fully opaque.value: numeric
object
xAxes

Configuration properties for the X Axes of the chart. Options as follows:

 Click here to see the xAxes properties
NameDescriptionProperty Type
nameA unique name to identify this axis configuration object. This field is required in order to configure the series.value: string
label

Enables or disables a label for the x axis.

NameDescriptionProperty Type
enabledEnables a label drawn alongside this axis.value: boolean
text Label text.value: string
colorLabel color. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
object
visibleMake the label visible, if label is enabled.value: boolean
tooltip

Tool tip configuration for the axis. Options as follows:

NameDescriptionProperty Type
enabled Enables the tooltip. Default is true.value: boolean
format A format string to apply to the tooltip text.value: string
cornerRadius Radius for the corner of tooltip.value: numeric
pointerLength Length (in pixels) for the pointer on the tooltip.value: numeric
background Configuration for the color and opacity of the background of the tooltip. See Color Selector.color
object
renderSets the axis type to render. Options are category, date, or value. Default is date.value: string dropdown
category

Category axis configuration. Applied when render is set to category. Groups data items into categories and allots equal space for each. Break settings tell the category axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabled Enables a break range. Default is false.value: boolean
startCategory Start point of the break.value: string 
endCategory End point of the break.value: string 
size The break size as a decimal percentage of the removed values.value: numeric
object
date

Date axis configuration. Applied when render is set to date. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
baseInterval Adjusts the granularity of the time scale. Otherwise will adjust intelligently by default. Options as follows:
NameDescriptionProperty Type
enabledEnables or disables baseInteval.value: boolean
timeUnitSpecifies the base time to apply to this time scale. Options are minute, second, hour, day, week, or year.value: string dropdown
countSpecifies how many time units each data item was collected.value: numeric
skipEmptyPeriodsRemoves empty time units from display. Using this feature affects performance. Will reset the use of axis breaks if true.value: boolean
object
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean


object
break

Tells the date axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startCategoryStart point of the break.value: string 
endCategoryEnd point of the break.value: string 
sizeThe break size as a decimal percentage of the removed values.value: numeric


object
inputFormat

Sets the date format of the axis value from the data source.

value: string dropdown
format Sets the date format for the axis labels.value: string dropdown



object
value

Value axis configuration. Applied when render is set to date. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean
object
logarithmicUse logarithmic scale. Useful if data varies greatly within the relevant series. Default is false.value: boolean
break

Tells the value axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startValueStart point of the break.value: numeric
endValueEnd point of the break.value: numeric
sizeThe break size as a decimal percentage of the removed values.value: numeric


object
formatA number format string to be applied against numbers if in number rendering mode. Options are number, integer, four decimal precision, percent, scientific, currency, currency (rounded), or abbreviation.value: string dropdown
object
appearance

Appearance options for the x axis. Options as follows:

NameDescriptionProperty Type
opposite Renders the axis on the opposite side. Default is falsevalue: boolean
inside Renders the axis labels on the inside of the axis. Default is false.value: boolean
labels

Axis label configuration:

NameDescriptionProperty Type
colorAxis label color.color
opacityAxis label opacity.value: numeric
object
grid

Configures the color, opacity and SVG dashed array of the grid lines.

NameDescriptionProperty Type
colorAxis grid color.color
opacityAxis grid opacity.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".value: string


object
font

Configures the font size and weight.

NameDescriptionProperty Type
sizeAxis font size.value: numeric
weightAxis font weight.value: numeric


object
object
array
yAxes

Configuration properties for the Y Axes of the chart.

 Click here to see the yAxes properties
NameDescriptionProperty Type
nameA unique name to identify this axis configuration object. This field is required in order to configure the series.value: string 
label

Enables or disables a label for the y axis. Options as follows:

NameDescriptionProperty Type
enabledEnables a label drawn alongside this axis.value: boolean
textLabel text.value: string
colorLabel color. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.color
value: boolean
visibleMake the label visible, if label is enabled.value: boolean
tooltip

Tool tip configuration for the axis. Options as follows:

NameDescriptionProperty Type
enabledEnables the tooltip. Default is true.value: boolean
formatA format string to apply to the tooltip text.value: string
cornerRadiusRadius for the corner of tooltip.value: numeric
pointerLengthLength (in pixels) for the pointer on the tooltip.value: numeric
backgroundConfiguration for the color and opacity of the background of the tooltip.color
object
renderSets the axis type to render. Options are category, date, or value. Default is date.value: string dropdown
category

Category axis configuration. Applied when render is set to category. Groups data items into categories and allots equal space for each. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startCategoryStart point of the break.value: string 
endCategoryEnd point of the break.value: string 
sizeThe break size as a decimal percentage of the removed values.value: numeric

date

Date axis configuration. Applied when render is set to date. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
baseIntervalAdjust the granularity of the time scale. Otherwise will adjust intelligently by default.
NameDescriptionProperty Type
enabledEnables or disables baseInteval.value: boolean
timeUnitSpecifies the base time to apply to this time scale. Options are minute, second, hour, day, week, or year.value: string dropdown
countSpecifies how many time units each data item was collected.value: numeric
skipEmptyPeriodsRemoves empty time units from display. Using this feature affects performance. Will reset the use of axis breaks if true.value: boolean
object
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean
object
break

Tells the date axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startCategoryStart point of the break.value: string 
endCategoryEnd point of the break.value: string 
sizeThe break size as a decimal percentage of the removed values.value: numeric
object
inputFormat

Sets the date format of the axis value from the data source.

value: string dropdown
formatSets the date format for the axis labels.value: string dropdown
object
value

Value axis configuration. Applied when render is set to date. Uses data and time scale. Options as follows:

NameDescriptionProperty Type
range

You can optionally adjust the date range. Otherwise will auto adjust by default. Options as follows:

NameDescriptionProperty Type
maxMaximum date in this range.value: string
minMinimum date in this range.value: string
useStrictStrictly enforces start and end values.value: boolean
object
logarithmicUse logarithmic scale. Useful if data varies greatly iwithin the relevant series.value: boolean
break

Tells the value axis to remove a certain range from its scale. Options as follows:

NameDescriptionProperty Type
enabledEnables a break range. Default is false.value: boolean
startValueStart point of the break.value: numeric
endValueEnd point of the break.value: numeric
sizeThe break size as a decimal percentage of the removed values.value: numeric
object
formatA number format string to be applied against numbers if in number rendering mode. Options are number, integer, four decimal precision, percent, scientific, currency, currency (rounded), or abbreviation.value: string dropdown
object
appearance

Appearance options for the y axis. Options as follows:

NameDescriptionProperty Type
oppositeRenders the axis on the opposite side. Default is falsevalue: boolean
insideRenders the axis labels on the inside of the axis. Default is false.value: boolean
labels

Axis label configuration:

NameDescriptionProperty Type
colorAxis label color.color
opacityAxis label opacity.value: numeric
object
grid

Configures the color, opacity and SVG dashed array of the grid lines.

NameDescriptionProperty Type
colorAxis grid color.color
opacityAxis grid opacity.value: numeric
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the grid. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total grid length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".value: string
object
font

Configures the font size and weight.

NameDescriptionProperty Type
sizeAxis font size.value: numeric
weightAxis font weight.value: numeric


object
object
array
series

An array of series configurations to apply to this chart.

 Click here to see the Series properties
NameDescriptionProperty Type
nameA unique name to identify this application of this series. value: string
label.text

Series label to use with the legend.

value: string
visibleMake the series visible. Default is true.value: boolean
hiddenInLegendHides the series in the legend. Default is false.value: boolean
defaultStateSeries default state configuration. Default is true (visible).value: boolean
data

Data settings for the chart. Options as follows:

NameDescriptionProperty Type
Source Name of the datasource to bind to this series.value: string
xThe y value key from the specified data source to be used in this series. Value is a string value if the data source is a dataset or an array of objects. Value is an index if the data source is an array of arrays.value: string or index
yThe y value key from the specified data source to be used in this series. Value is a string value if the data source is a dataset or an array of objects. Value is an index if the data source is an array of arrays.value: string or index

xAxisName of the x axis configuration object to be used with this series.value: string
yAxisName of the y axis configuration object to be used with this series.value: string
zIndexSets the series stack order relative to other series.value: numeric
tooltip

Tool tip configuration for the axis. Options as follows:

NameDescriptionProperty Type
enabledEnables the tooltip. Default is true.value: boolean
formatA format string to apply to the tooltip text.value: string
cornerRadiusRadius for the corner of tooltip.value: numeric
pointerLengthLength (in pixels) for the pointer on the tooltip.value: numeric
background

Configuration for the color and opacity of the background of the tooltip.

NameDescriptionProperty Type
colorBackground color. See Color Selector.color
opacityBackground opacity.value: numeric
object
object
renderThe series render mode. Options are candlestick, column, line, step line. Default is line.value: string dropdown
candlestick

A candlestick chart is used to show an opening and closing value overlaid on top of a total variance. Options as follows:

NameDescriptionProperty Type
openThe lower left point on the rectanglevalue: string 
high High value to use in the candlestick portion of the chart.value: string 
low Low value to use in the candlestick portion of the chart.value: string 
appearance

Configures the fill color and opacity for this series. Also has option to stack the column series (default is false).

NameDescriptionProperty Type
fillFill color for this series. See Color Selector.color
opacityFill opacity.value: numeric
stackedStacks the column series.value: boolean
object

column

Column settings. Options as follows:

NameDescriptionProperty Type
colorThe fill color for the columns in this series. See Color Selector.color
opacityThe column opacity.value: numeric
stackedStacks the column series.value: boolean


object
line

Line series configuration. Options as follows:

 Click here to see the Line properties
NameDescriptionProperty Type
open

Configures

NameDescriptionProperty Type
xName of the field that holds the open data for the horizontal axisvalue:string
yName of the field that holds the open data for the vertical axisvalue:string

appearance

Configures the appearance of the line series. Options as follows:

NameDescriptionProperty Type
connect Connects the lines over empty data points. Default is true.value: boolean
tensionX Horizontal tension setting of the line. Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
tensionY Vertical tension setting of the line. Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
minDistance The minimum distance (in pixels) between two points. Default is 0.5.value: numeric
stroke

Series stroke configuration. Options as follows:

NameDescriptionProperty Type
widthWidth of the stroke, in pixels. Default is 3.value: numeric
opacityOpacity of the stroke.value: numeric
colorCursor line stroke color.color
dashArraySVG dash array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".array


object
fill

Series color configuration.

NameDescriptionProperty Type
colorThe color to draw this series.value: color
opacityOpacity as a percentage from 0 to 1. 0 is transparent, 1 is opaque.value: float


object
bullets

Series bullet configuration. Type of bullet to render (circle or rectangle) for each pen.

NameDescriptionProperty Type
enabledEnables bullets.value: boolean
renderType of bullet to render. Options are circle, rectangle, or icon.value: string dropdown
horizontalCenterHorizontal center for the bullet. Options are left, middle, or right.value: string dropdown
verticalCenterCertical center for the bullet. Options are left, middle, or right.value: string dropdown
widthBullet width.value: numeric
heightBullet height.value: numeric
colorBullet color. See Color Selector.color
opacityBullet opacity.value: numeric
rotationBullet rotation. Value can be 0 to 360.value: numeric


array
object
object
stepLine

Step line series configuration.

 Click here to see the stepLine properties


NameDescriptionProperty Type
appearance

Configures the following options:

NameDescriptionProperty Type
connectConnects the lines over empty data points. Default is true.value: boolean
tensionXHorizontal tension setting of the line. Used to create smooth or sharp lines Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
tensionYVertical tension setting of the line. Used to create smooth or sharp lines Range is 0 to 1. A 1 value indicates high tension, so the line is maximally attracted to the points it connects (i.e. straight line). A 0 value means the opposite. Default is 1.value: numeric
minDistanceThe minimum distance (in pixels) between two points. Default is 0.5.value: numeric
object
stroke

Series stroke configuration. Options are as follows:

NameDescriptionProperty Type
widthWidth of the stroke, in pixels. Default is 3.value: numeric
opacityOpacity of the stroke. 0 is fully transparent, 1 is fully opaque. Default is 1.value: numeric
color Color of border around each pie section.  See Color Selector.color
dashArraySVG dashed array. The pattern of dashes and gaps used to paint the stroke. It's a list of comma separated lengths (in pixels) and percentages (percentage of the total stroke length) that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, "5,3,2" is equivalent to "5,3,2,5,3,2".
array
object
bullet

Series bullet configuration. Options as follows:

NameDescriptionProperty Type
enabledEnables bullets.value: boolean
renderType of bullet to render. Options are circle, rectangle, or icon.value: string dropdown
horizontalCenterHorizontal center for the bullet. Options are left, middle, or right.value: string dropdown
verticalCenterVertical center for the bullet. Options are left, middle, or right.value: string dropdown
widthBullet width.value: numeric
heightBullet height.value: numeric
opacityBullet opacity.value: numeric
rotationBullet rotation. Value can be 0 to 360.value: numeric
object




array
styleSets a style for this chart. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object

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 Perspective 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.

Examples
Example

PropertyValue
props.title.textSample Temperature Chart
props.datasources.example.8.process_temp71
props.yAxes.1.label.textTemperature
props.yAxes.appearance.oppositefalse
props.series.0.yAxisoutput temp
props.yAxis.1.value.range.max80
props.yAxis.1.value.range.min20
props.yAxis.1.value.range.useStricttrue
props.series.0.line.appearance.bullets.0.enabledfalse
props.series.1.line.appearance.bullets.0.stroke.width5


  • No labels