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. |
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 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 |
When this is set to
This is a two-way property. It is set to |
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
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
This is a two-way property. It is set to |
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 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 |
|
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. | 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 |
LineAppearance
| Name | Description | Property Type |
|---|---|---|
| stroke | The color of measurement lines. | Color |
| thickness | The thickness of measurement lines. | Integer |
|
dashArray
|
Array of float values that specifies the size of dashes and gaps used to draw the measurement line. Enter an even number of float values to create a repeating pattern. |
Float[] |
| opacity |
The opacity of measurement lines. 0 = Transparent, 1 = Opaque. |
Float |
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. |
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 |
| position |
Object to specify if the info box coordinates are |
Position |
| 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 |
| executeOn | Specifies the mouse button used to pan the chart. | PanButton |
| 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 |
|---|---|---|
| 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 |
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 |
String[] |
PanButton
| 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 |
| panExecuteOn | Specifies the mouse button used to pan the axis. | DragPanButton |
| axisHighlight | Object to configure the appearance of the rectangle that highlights the range of the x-axis to zoom to. | Highlight |
DragPanButton
| 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 |
| panExecuteOn | Specifies the mouse button used to pan the axis. | DragPanButton |
| 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 |
|---|---|---|
| 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 |
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 |
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 |
LineAppearance
| Name | Description | Property Type |
|---|---|---|
| visible | Toggles the visibility of the lines for all annotation instances. | Boolean |
| stroke | The color of the line. | 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 |
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 |
|---|---|---|
| start | The coordinates of the first point in the measurement line. | Point |
| end | The coordinates of the last point in the measurement line. | 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 |
| position |
Object to specify if the info box coordinates are |
Position |
| 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 |
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 |
Position
| Name | Description | Property Type |
|---|---|---|
| x | Specifies the position type of the corresponding x-coordinate. | PositionType |
| y | Specifies the position type of the corresponding y-coordinate. | PositionType |
PositionType
| 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 |
InfoBoxAppearance
| Name | Description | Property Type |
|---|---|---|
| stroke | The color of the outline of info boxes. | Color |
| fill | The color of the interior of info boxes. | Color |
| fontFamily | The font family of the text in info boxes. | String |
| fontSize | The size of the text in 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 |
Point
| Name | Description | Property Type |
|---|---|---|
| x | The x-coordinate of the point. | Float |
| y | The y-coordinate of the point. | Float |