Skip to main content

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

Menu

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. Color open_in_new.png
selectedColorFg
 Color of the icon on the active interaction mode button. Color open_in_new.png

ResetZoom

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

PlayPause

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

Download

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

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 range(s) 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. Color open_in_new.png
stroke The color of the border of ranges. Color open_in_new.png
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 axis. 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 containing properties for the appearance of all xTrace functionality. Trace
maxInstances The maximum number of x-traces allowed on the chart. When this number is exceeded, the oldest traces are removed first. 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. Color open_in_new.png
thickness The thickness of the lines representing the coordinates of the mouse. 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
fill The color of the fill of the lines representing the coordinates of the mouse. Color open_in_new.png
fontFamily The font for all text present in xTrace mode. Font
fontSize The size of all text present in xTrace mode. Float

Measurement

Object containing properties for the slope mode.

Name Description Property Type
visible Toggles the visibility of the slope mode button in the menu. Boolean
line Object containing properties for the appearance of all slope mode lines. Line
infoBox Object containing properties for the appearance of all slope mode line labels. InfoBox
instances

This is a two-way property. It is updated when the user interactively creates or updates a measurement.

 MeasurementInstance[]
axisHighlight Object containing properties for the appearance of highlights applied to each axis when selected. AxisHighlight
maxInstances The maximum number of concurrent lines allowed. When this number is exceeded, the oldest lines will be removed first. Integer

Line

Name Description Property Type
stroke The color of the outline of slope mode lines. Color open_in_new.png
thickness The thickness of slope mode 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 open_in_new.png
fill The color of the interior of the line label. Color open_in_new.png
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

MeasurementPoint

MeasurementInfoBox

MeasurementAnchor

MeasurementPosition

MeasurementCoordinates

AxisHighlight

Name Description Property Type
fill The color of the axis highlight area. Color open_in_new.png
stroke The color of the axis highlight border. Color open_in_new.png
thickness The thickness of axis highlight border. Integer

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

AreaHighlight

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

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

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

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 Determines visibility Boolean
height ??? 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

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

AxisHighlight

Name Description Property Type
fill   Array
stroke

thickness

 

Shared Types

Highlight

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

Back to top