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 displays all data for 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, and the first object in the array is used to define the range.	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

Name	Description	Property Type
xAxis	The name of 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 x-trace 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 `textAnnotationStroke` and `traceStroke` theme properties.	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
dashArray	Array of float values that specifies the size of dashes and gaps used to draw the x and y lines. Enter an even number of float values to create a repeating pattern.	Float[]
fill	The color of the background of the tooltip and axis labels at the mouse coordinates. Overrides the `textAnnotationFill` theme property.	Color

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.	LineAppearance
infoBox	Object to configure the appearance of all measure mode info boxes.	InfoBoxAppearance
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

MeasurementInstance

Name	Description	Property Type
axis	Object to set the x- and y-axis for the measurement.	MeasurementAxis
line	Object to set the start and end coordinates of the line.	MeasurementLine
infoBox	Object to configure the contents and location of the info box.	MeasurementInfoBox

MeasurementAxis

Name	Description	Property Type
x	The name of the x-axis the measurement is drawn on.	String
y	The name of the y-axis the measurement is drawn on.	String

MeasurementLine

Name	Description	Property Type
start	The coordinates of the first point in the measurement line.	Point
end	The coordinates of the last point in the measurement line.	Point

MeasurementInfoBox

Name	Description	Property Type
visible	Toggles the visibility of the info box.	Boolean
text	The text displayed in the info box.	String
anchor	Object to configure the alignment of the info box relative to its coordinates.	Anchor
coordinateModes	Object to specify if the info box coordinates are `Relative` (0.0 at top/left to 1.0 at bottom/right), `Pixel` values, or a `DataValue`.	CoordinateModes
coordinates	Object to specify the x- and y-coordinates of the info box's anchor point.	Point

ZoomToArea

Name	Description	Property Type
visible	Toggles the visibility of the zoom to area mode button in the menu.	Boolean
animated	Toggles whether the zoom includes a gradual animation or immediately snaps to the selected area.	Boolean
areaHighlight	Object to configure the appearance of the rectangle that highlights the area to zoom to.	Highlight

PanAndZoom

Name	Description	Property Type
visible	Toggles the visibility of the pan and zoom mode button in the menu.	Boolean
zoomPan	Object to configure panning and pinch-zoom functionality on the chart area.	ZoomPan
xAxisDrag	Object to configure panning and zooming on the x-axes.	xAxisDrag
yAxisDrag	Object to configure panning and zooming on the y-axes.	yAxisDrag
zoomExtents	Object to configure zooming to the extents of the data.	ZoomExtents

ZoomPan

Name	Description	Property Type
enabled	Specifies if mouse and touch panning is enabled.	Boolean
pinchZoom	Object to configure pinch-zooming on touch devices.	PinchZoom
axes	Object to configure the axes that the zoomPan functionality applies to.	ZoomPanAxes
panMouseButton	Specifies the mouse button used to pan the chart.	PanMouseButton
xyDirection	Object to configure whether panning is allowed in the x- or y-direction or both.	ZoomPanXyDirection

PinchZoom

Name	Description	Property Type
enabled	Specifies if touch pinch-zooming is enabled.	Boolean
horizontalGrowFactor	The amount of pinch-zooming applied in the x-direction. Set to 0 to prevent zooming in this direction. Default is 0.001.	Float
verticalGrowFactor	The amount of pinch-zooming applied in the y-direction. Set to 0 to prevent zooming in this direction. Default is 0.001.	Float

ZoomPanAxes

Name Description Property Type

Name	Description	Property Type
x	Array to specify the names of the x-axes that panning and pinch-zooming in the chart area applies to. Panning and pinch-zooming in the chart area is applied to all x-axes if the array is empty and the `XyDirection` is not `YDirection`.	String[]
y	Array to specify the names of the y-axes that panning and pinch-zooming in the chart area applies to. Panning and pinch-zooming in the chart area is applied to all y-axes if the array is empty and the `XyDirection` is not `XDirection`.	String[]

Array to specify the names of the x-axes that panning and pinch-zooming in the chart area applies to.

Panning and pinch-zooming in the chart area is applied to all x-axes if the array is empty and the XyDirection is not YDirection.

String[]

Array to specify the names of the y-axes that panning and pinch-zooming in the chart area applies to.

Panning and pinch-zooming in the chart area is applied to all y-axes if the array is empty and the XyDirection is not XDirection.

String[]

PanMouseButton

Name	Description	Property Type
MouseLeftButton	Pans the chart when the mouse is moved while the left mouse button is pressed.	String
MouseMiddleButton	Pans the chart when the mouse is moved while the middle mouse button is pressed.	String
MouseRightButton	Pans the chart when the mouse is moved while the right mouse button is pressed.	String

ZoomPanXyDirection

Name	Description	Property Type
XDirection	Allows chart panning and pinch-zooming in the x-direction only.	String
YDirection	Allows chart panning and pinch-zooming in the y-direction only.	String
XyDirection	Allows chart panning and pinch-zooming in both x- and y-directions.	String

xAxisDrag

Name	Description	Property Type
enabled	Specifies if panning and/or zooming on the x-axes is enabled.	Boolean
panMouseButton	Specifies the mouse button used to pan the axis.	DragPanMouseButton
axisHighlight	Object to configure the appearance of the rectangle that highlights the range of the x-axis to zoom to.	Highlight

DragPanMouseButton

Name	Description	Property Type
None	Panning on the axis is disabled, and all mouse buttons zoom to the selected range.	String
MouseLeftButton	Pans the chart when the mouse is moved while the left mouse button is pressed.	String
MouseMiddleButton	Pans the chart when the mouse is moved while the middle mouse button is pressed.	String
MouseRightButton	Pans the chart when the mouse is moved while the right mouse button is pressed.	String

yAxisDrag

Name	Description	Property Type
enabled	Specifies if panning and/or zooming on the y-axes is enabled.	Boolean
panMouseButton	Specifies the mouse button used to pan the axis.	DragPanMouseButton
axisHighlight	Object to configure the appearance of the rectangle that highlights the range of the y-axis to zoom to.	Highlight

ZoomExtents

Name	Description	Property Type
enabled	Specifies if double-clicking the chart area or an axis zooms to the data extents.	Boolean

MouseWheelZoom

Name	Description	Property Type
enabled	Specifies if mouse wheel zooming is enabled.	Boolean
growFactor	The amount of zooming applied relative to the mouse wheel scroll amount. Default is 0.001.	Float
xyDirection	Object to configure whether zooming is allowed in the x- or y-direction or both.	MouseWheelXyDirection
axes	Object to configure the axes that the mouseWheelZoom functionality applies to.	Axes

MouseWheelXyDirection

Name	Description	Property Type
XDirection	Allows mouse wheel zooming in the x-direction only.	String
YDirection	Allows mouse wheel zooming in the y-direction only.	String
XyDirection	Allows mouse wheel zooming in both x- and y-directions.	String

Axes

Name Description Property Type

Name	Description	Property Type
x	Array to specify the names of the x-axes that mouse wheel zooming applies to. Mouse wheel zooming is enabled for all x-axes if the array is empty and the `XyDirection` is not `YDirection`.	String[]
y	Array to specify the names of the y-axes that mouse wheel zooming in applies to. Mouse wheel zooming is enabled for all y-axes if the array is empty and the `XyDirection` is not `XDirection`.	String[]

Array to specify the names of the x-axes that mouse wheel zooming applies to.

Mouse wheel zooming is enabled for all x-axes if the array is empty and the XyDirection is not YDirection.

String[]

Array to specify the names of the y-axes that mouse wheel zooming in applies to.

Mouse wheel zooming is enabled for all y-axes if the array is empty and the XyDirection is not XDirection.

String[]

Overview

Name	Description	Property Type
visible	Toggles the visibility of the chart overview.	Boolean
height	The height of the overview. Use in conjunction with the chart height to better control the size of each.	String
axis	Object to specify the names of the x- and y-axis to link the overview to. The overview duplicates these axes and displays all data for the pens with the same axis configuration.	OverviewAxis

OverviewAxis

Name	Description	Property Type
x	The name of the x-axis used for the overview.	String
y	The name of the y-axis used for the overview.	String

Annotation

Name	Description	Property Type
visible	Toggles the visibility of the annotation mode button in the menu.	Boolean
dot	Object to configure the appearance of all annotate mode dots.	DotAppearance
infoBox	Object to configure the appearance of all annotate mode info boxes.	InfoBoxAppearance
line	Object to configure the appearance of all lines that connect annotation dots and info boxes.	LineAppearance
instances	An array of objects that define the annotations on the chart. This is a two-way property. It is updated when the user interactively creates or updates an annotation.	AnnotationInstance[]
axisHighlight	Object to configure the appearance of the rectangle that highlights an x- or y-axis when it is clicked.	Highlight

DotAppearance

Name	Description	Property Type
radius	The radius of the dot in pixels.	Float
stroke	The color of the dot border.	Color
thickness	The thickness of the dot border.	Float
fill	The color of the interior of the dot.	Color
opacity	The opacity of the border and background of the dot. 0 = Transparent, 1 = Opaque.	Float

AnnotationInstance

Name	Description	Property Type
axis	Object to set the x- and y-axis for the annotation.	AnnotationAxis
pen	The optional pen name that this annotation corresponds too. This is set when an annotation is added by clicking on a pen's data point.	String
dot	Object to set the coordinates of the dot.	Point
infoBox	Object to configure the contents and location of the info box.	AnnotationInfoBox
uuid	The unique identifier for the annotation instance.	String

AnnotationAxis

Name	Description	Property Type
x	The name of the x-axis the annotation is drawn on.	String
y	The name of the y-axis the annotation is drawn on.	String

AnnotationDot

Name	Description	Property Type
coordinates	The coordinates of the annotation dot on the x- and y-axes.	Point

AnnotationInfoBox

Name	Description	Property Type
visible	Toggles the visibility of the info box.	Boolean
text	The text displayed in the info box.	String
anchor	Object to configure the alignment of the info box relative to its coordinates.	Anchor
coordinateModes	Object to specify if the info box coordinates are `Relative` (0.0 at top/left to 1.0 at bottom/right), `Pixel` values, or a `DataValue`.	CoordinateModes
coordinates	Object to specify the x- and y-coordinates of the info box's anchor point.	Point
showX	Toggles the visibility of the dot's x-coordinate value at the top of the info box.	Boolean

Shared Types

Anchor

Name	Description	Property Type
vertical	Specifies the alignment of the the info box relative to its y-coordinate.	VerticalAnchorType
horizontal	Specifies the alignment of the the info box relative to its x-coordinate.	HorizontalAnchorType

VerticalAnchorType

Name	Description	Property Type
Top	The y-coordinate specifies the top of the info box.	String
Center	The y-coordinate specifies the middle of the info box vertically.	String
Bottom	The y-coordinate specifies the bottom of the info box.	String

HorizontalAnchorType

Name	Description	Property Type
Left	The x-coordinate specifies the left side of the info box.	String
Center	The x-coordinate specifies the middle of the info box horizontally.	String
Right	The x-coordinate specifies the right side of the info box.	String

CoordinateModes

Name	Description	Property Type
x	Specifies the mode of the corresponding x-coordinate.	CoordinateMode
y	Specifies the mode of the corresponding y-coordinate.	CoordinateMode

CoordinateMode

Name	Description	Property Type
DataValue	The coordinate value refers to the corresponding axis.	String
Pixel	The coordinate value is a set pixel coordinate on the chart area. The top left corner is pixel 0, and the bottom right corner is equal to the width and height of the chart.	String
Relative	The coordinate value is a relative value on the chart area. The top left corner is 0, and the bottom right corner is 1.	String

Highlight

Name	Description	Property Type
fill	The color of the highlight area. Overrides the `highlightFill` theme property.	Color
stroke	The color of the highlight area's border. Overrides the `highlightStroke` theme property.	Color
thickness	The thickness of the highlight area's border.	Integer

InfoBoxAppearance

Name	Description	Property Type
stroke	The color of the info boxes' outline and text. Overrides the `textAnnotationStroke` theme property.	Color
fill	The color of the info boxes' interior. Overrides the `textAnnotationFill` theme property.	Color
fontFamily	The font family of the text within info boxes.	String
fontSize	The size of the text within info boxes.	Float
opacity	The opacity of the border, background, and text of info boxes. 0 = Transparent, 1 = Opaque.	Float
radius	The corner radius of info box borders.	Float
width	The width in pixels of info boxes.	Float
height	The height in pixels of info boxes.	Float
padding	The number of pixels between the border and text in info boxes.	Float

LineAppearance

Name	Description	Property Type
stroke	The color of the line. Overrides the `textAnnotationStroke` theme property.	Color
thickness	The thickness of the line.	Float
dashArray	Array of float values that specifies the size of dashes and gaps used to draw the line. Enter an even number of float values to create a repeating pattern.	Float[]
opacity	The opacity of the line. 0 = Transparent, 1 = Opaque.	Float

Point

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