Interaction Properties

The interaction properties configure how a user interacts with the chart, including its menu and interaction modes. They are summarized here and described in further detail in the linked sections below.

Name	Description	Property Type
mode	Specifies which interaction mode is active. Only one mode may be selected at a time because they produce different results when a user clicks on the chart. The mode can be selected form the menu or set directly in the component props. This is a two-way property. It is updated when the mode is changed from the menu.	Mode
menu	Configures the general appearance of the chart menu that includes buttons to set the interaction mode, download a PNG of the chart, reset the zoom level, and clear annotations, range brushes, or measurements. The visibility of most buttons in the menu is set in the properties specific to that button, not in this Menu object.	Menu
resetZoom	Allows the user to reset the axis ranges based on the the axis range properties.	ResetZoom
playPause	Allows the user to pause or resume data updates in the chart. Pausing data updates can be done for analysis or to create a screenshot without having new data change the appearance of the chart. It may be more efficient to stop data bindings from executing than to use this button.	PlayPause
download	Allows the user to download a PNG format copy of the chart. This includes everything visible on the chart and can be sized and printed as desired.	Download
rangeBrush	Object to configure the range brush mode.	RangeBrush
xTrace	Object to configure the x trace mode.	XTrace
measurement	Object to configure the measure mode.	Measurement
zoomToArea	Object to configure the zoom to area mode.	Zoom to Area
panAndZoom	Object to configure the pan and zoom mode.	Pan and Zoom
mouseWheelZoom	Object to configure mouse wheel zooming over the chart or individual axes. This is not included in a mode because the modes do not make use of the mouse wheel so their use does not conflict.	Mouse Wheel Zoom
overview	Object to configure the chart overview that provides a view of all pens on one x- and y-axis pair and allows panning and zooming to a specific x-range.	Overview
annotation	Object to configure the annotate mode.	Annotation

Mode

Name	Description	Property Type
None	No interactions are active. Clicking on the chart will not change anything.	String
PanZoom	Enables click-and-drag panning as well as pinch-zooming on touch screens.	String
Measure	Enables drawing lines which can be used to calculate slope, length, or differences in the x or y direction.	String
XTrace	Displays pen and mouse coordinate information when hovering over the chart and enables the placement of markers along the x-axis that display the y values of visible pens.	String
RangeBrush	Enables the selection of x ranges on the chart which can be used to display statistics for the data in that range.	String
Annotate	Enables adding custom text annotations to the chart.	String
ZoomToArea	Enables the selection of a rectangular area to zoom in to.	String

Name	Description	Property Type
visible	Toggles visibility of the menu. Menu functionality can be implemented in Ignition outside of the component if desired. This is a two-way property. It is updated when the mode is changed from the menu.	Boolean
selectedColorBg	Color of the background of the active interaction mode button as well as the main menu button.	Color
selectedColorFg	Color of the icon on the active interaction mode button as well as the main menu button.	Color

Name

Description

Property Type

visible

Toggles visibility of the menu. Menu functionality can be implemented in Ignition outside of the component if desired.

This is a two-way property. It is updated when the mode is changed from the menu.

Boolean

selectedColorBg

Color of the background of the active interaction mode button as well as the main menu button.

Color

selectedColorFg

Color of the icon on the active interaction mode button as well as the main menu button.

Color

ResetZoom

Name Description Property Type

visible Toggles visibility of the reset zoom button in the menu. Boolean

triggerReset

Name	Description	Property Type
visible	Toggles visibility of the reset zoom button in the menu.	Boolean
triggerReset	When this is set to `true`, the axes are reset based on their configured settings and this value is reset to `false`. This is a two-way property. It is set to `false` after the axes have been reset.	Boolean

When this is set to true, the axes are reset based on their configured settings and this value is reset to false.

This is a two-way property. It is set to false after the axes have been reset.

Boolean

PlayPause

Name Description Property Type

visible Toggles the visibility of the play/pause button in the menu. Boolean

updateData

Name	Description	Property Type
visible	Toggles the visibility of the play/pause button in the menu.	Boolean
updateData	When this is set to `true`, data for configured pens is rendered as it is added to the props. This is a two-way property. It is updated when the play pause button in the menu is clicked.	Boolean

When this is set to true, data for configured pens is rendered as it is added to the props.

This is a two-way property. It is updated when the play pause button in the menu is clicked.

Boolean

Download

Name Description Property Type

visible Toggles the visibility of the download as PNG button in the menu. Boolean

triggerDownload

Name	Description	Property Type
visible	Toggles the visibility of the download as PNG button in the menu.	Boolean
triggerDownload	When this is set to `true`, a dialog to download a copy of the chart as PNG is opened and this value is reset to `false`. This is a two-way property. It is set to `false` after the chart is downloaded.	Boolean

When this is set to true, a dialog to download a copy of the chart as PNG is opened and this value is reset to false.

This is a two-way property. It is set to false after the chart is downloaded.

Boolean

RangeBrush

Name	Description	Property Type
visible	Toggles the visibility of the range brush mode button in the menu.	Boolean
brush	Object to configure the appearance of ranges.	Brush
ranges	An array of arrays for each range instance. The array for each range instance contains an object for each x-axis in the chart. This is a two-way property. It is updated when the user interactively creates or updates a range and when an instance is added directly in the props. Instances added in the props do not need to include objects for each x-axis.	Range[][]
axisHighlight	Object to configure the appearance of the rectangle that highlights an x-axis when it is clicked.	Highlight
maxInstances	The maximum number of concurrent ranges. The oldest ranges are removed when attempting to add a new one and this number would be exceeded.	Integer

Brush

Name	Description	Property Type
fill	The color of the area of ranges. Overrides `highlightFill` theme property.	Color
stroke	The color of the border of ranges. Overrides `highlightStroke` theme property.	Color
thickness	The thickness of the border of ranges.	Float
opacity	The opacity of the border and area of ranges. 0 = Transparent, 1 = Opaque.	Float

Range

Each range instance stores an array of Range object properties with one range per configured x-axis.

Name	Description	Property Type
xAxis	The x-axis that this range refers to.	String
start	The minimum x coordinate of the range.	Integer
end	The maximum x coordinate of the range.	Integer

XTrace

Name	Description	Property Type
visible	Toggles the visibility of the xTrace mode button in the menu.	Boolean
showTooltip	Toggles the visibility of the tooltip that follows the cursor.	Boolean
showAxisLabels	Toggles the visibility of the coordinate labels following the cursor along the axes. These are only shown on the x- or y-axes when showXLine or showYLine is `true`, respectively.	Boolean
showXLine	Toggles the visibility of the vertical line showing the x coordinate of the mouse.	Boolean
showYLine	Toggles the visibility of the horizontal line showing the y coordinates of the mouse.	Boolean
trace	Object to configure the appearance of all x-trace instances.	Trace
maxInstances	The maximum number of concurrent x-traces. The oldest traces are removed when attempting to add a new one and this number would be exceeded.	Integer

Trace

Name	Description	Property Type
stroke	The color of the outline of the lines representing the coordinates of the mouse, as well as the text within the tooltip and within the axes labels. Overrides the `traceStroke` theme property.	Color
thickness	The thickness of the horizontal and vertical lines extending from the mouse coordinates and of the vertical line for x-trace instances.	Integer
lineDash	An array holding numeric values representing line dashing. Add an even amount of numbers to the array to create a repeating pattern. Array of float values that specifies the size of dashes and gaps used to draw the gridline. Enter an even number of float values to create a repeating pattern.	Array
fill	The color of the fill of the lines representing the coordinates of the mouse.	Color
fontFamily	The font family of text on all x-trace labels. Known issue: this does not work.	Font
fontSize	The font size of text on all x-trace labels. Known issue: this does not work.	Float

Measurement

Name	Description	Property Type
visible	Toggles the visibility of the measurement mode button in the menu.	Boolean
line	Object to configure the appearance of all measure mode lines.	Line
infoBox	Object to configure the appearance of all measure mode line labels.	InfoBox
instances	An array of objects that define the measurements on the chart. This is a two-way property. It is updated when the user interactively creates or updates a measurement.	MeasurementInstance[]
axisHighlight	Object to configure the appearance of the rectangle that highlights an x- or y-axis when it is clicked.	Highlight
maxInstances	The maximum number of concurrent measurement lines. The oldest measurements are removed when attempting to add a new one and this number would be exceeded.	Integer

Line

Name	Description	Property Type
stroke	The color of measurement lines.	Color
thickness	The thickness of measurement lines.	Integer
lineDash	An array holding numeric values representing line dashing. Enter an even amount of numbers to create a recurring pattern.	Array
opacity	The opacity of slope mode lines (1: opaque, 0: invisible).	Integer

InfoBox

Name	Description	Property Type
stroke	The color of the outline of the line label.	Color
fill	The color of the interior of the line label.	Color
fontFamily	The font family of the text in the line label.	String
fontSize	The size of the text in the line label.	Float
opacity
radius
width
height
padding

MeasurementInstance

Name	Description	Property Type
axis
line
infoBox

MeasurementAxis

MeasurementLine

MeasurementInfoBox

Name	Description	Property Type
visible
text
anchor
position
coordinates

MeasurementAnchor

MeasurementPosition

MeasurementCoordinates

ZoomToArea

Object containing properties for the zoomToArea mode.

Name	Description	Property Type
visible	Toggles the visibility of the zoomToArea mode button in the menu.	Boolean
animated	Toggles whether the zoom includes a gradual animation or immediately snaps to the area.	Boolean
areaHighlight		Highlight

PanAndZoom

Object containing properties for mouse/touch panning and pinch-zooming.

Name	Description	Property Type
visible	Toggles the visibility for the zoomPan mode button in the menu.	Boolean

zoomPan	Object containing properties for panning.	ZoomPan
xAxisDrag	Object containing properties for dragging on x-axes.	xAxisDrag
yAxisDrag	Object containing properties for dragging on y-axes.	yAxisDrag
zoomExtents	Object containing properties	Object

ZoomPan

Name	Description	Property Type
enabled	Toggles panning functionality	Boolean
pinchZoom	Object containing properties for pinch-zooming.	PinchZoom
axes	Object containing all axes with zoomPan functionality enabled.	Axes
executeOn	The input that triggers panning	Enum (add ref)
xyDirection	Object containing properties that allow panning and zooming to be limited by the x- or y- axes.	xyDirection

⮱ZoomPan.PinchZoom

Name	Description	Property Type	Default
enabled	Toggles pinch-zooming functionality.	Boolean	`true`
horizontalGrowFactor	Affects the horizontal pinch-zooming rate.	Float	`1`
verticalGrowFactor	Affects the vertical pinch-zooming rate.	Float	`1`

⮱ZoomPan.axes

If the axes prop is left empty, Ignition will behave as though it contains all axes, and chart panning will be fully enabled.

Name	Description	Property Type
x	All x-axes on which chart panning is enabled.	String[]
y	All y-axes on which chart panning is enabled.	String[]

ZoomPan.xyDirection

Name	Description	Property Type
XDirection	Allows chart panning only on x-axes.	String
YDirection	Allows chart panning only on y-axes.	String
XyDirection	Allows free chart panning on both x and y-axes.	String

xAxisDrag

Name	Description	Property Type
enabled	Toggles dragging functionality on all x-axes. If this is enabled, the user may drag on the x-axes to select a range to zoom in on horizontally.	Boolean
panExecuteOn
axisHighlight		Highlight

yAxisDrag

Name	Description	Property Type
enabled	Toggles dragging functionality on all y-axes. If this is enabled, the user may drag on the y-axes to select a range to zoom in on vertically.	Boolean
panExecuteOn
axisHighlight		Highlight

ZoomExtents

Name	Description	Property Type
enabled	Determines whether zoom extents are enabled	Boolean

MouseWheelZoom

Object containing properties for mouse wheel zooming.

Name	Description	Property Type	Default
enabled	Specifies whether mouse wheel zooming is enabled.	Boolean	`true`
growFactor	The rate of mouse wheel zooming (Should be set to a small number).	Float	`0.001`
xyDirection
axes	Object containing all axes with mouse wheel zooming functionality enabled.	Axes	`{}`

Axes

Name	Description	Property Type
x	All x-axes with mouse wheel zooming enabled.	Array
y	All y-axes with mouse wheel zooming enabled.	Array

Overview

Name	Description	Property Type
visible	Toggles the visibility of the overview.	Boolean
height	The height of the overview. Use in conjunction with the chart height to better control the size of each.	Integer
axis	???	Object

Axis

Name	Description	Property Type
x		Array
y		Array

Annotation

Name	Description	Property Type
visible		Boolean
dot
infoBox
line
instances	This is a two-way property. It is updated when the user interactively creates or updates an annotation.
axisHighlight		Highlight

Dot

Name	Description	Property Type
radius		Array
stroke
thickness
fill
opacity

InfoBox

Name	Description	Property Type
stroke		Array
fill
fontFamily
fontSize
opacity
radius
width
height
padding

Line

Name	Description	Property Type
visible		Array
stroke
thickness
lineDash
opacity

Instance

Name	Description	Property Type
axis		Array
pen
dot
infoBox
uuid

Dot.coordinates

InfoBox

Name	Description	Property Type
visible		Array
text
anchor
position
coordinates
showX

infoBox.anchor

infoBox.position

infoBox.coordinates

Shared Types

Highlight

Name	Description	Property Type
fill	The color of the highlight area.	Color
stroke	The color of the highlight area's border.	Color
thickness	The thickness of the highlight area's border.	Integer

Point

Name	Description	Property Type
x	The x-coordinate of the point.	Float
y	The y-coordinate of the point.	Float