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. |
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. |
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 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 fill of the lines representing the coordinates of the mouse. | 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. | Line |
| 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 |
Line
| 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 that this measurement is drawn on. | String |
| y | The name of the y-axis that this 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 zooming on the x-axes. | xAxisDrag |
| yAxisDrag | Object to configure 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 whether 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. | ZoomPanButton |
| xyDirection | Object to configure whether panning is allowed in the x- or y-direction or both. | XyDirection |
PinchZoom
| Name | Description | Property Type |
|---|---|---|
| enabled | Specifies whether touch pinch-zooming is enabled. | Boolean |
| horizontalGrowFactor | The rate pinch-zooming is applied in the x-direction. | Float |
| verticalGrowFactor | The rate pinch-zooming is applied in the y-direction. | Float |
ZoomPanAxes
| Name | Description | Property Type |
|---|---|---|
| x |
Array of x-axis names on which chart panning is enabled.
Mouse panning and touch pan and zoom in the chart area is applied to all x-axes if the array is empty and the |
String[] |
| y | All y-axes on which chart panning is enabled. | String[] |
PanButton
| Name | Description | Property Type |
|---|---|---|
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
| 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 | InfoBoxAppearance | |
| 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 | 0 = Transparent, 1 = Opaque. | Float |
Line
| Name | Description | Property Type |
|---|---|---|
| visible | Array | |
| stroke | ||
| thickness | ||
|
dashArray
|
||
| opacity | 0 = Transparent, 1 = Opaque. | Float |
Instance
| Name | Description | Property Type |
|---|---|---|
| axis | Array | |
| pen | ||
| dot | ||
| infoBox | ||
| uuid |
InfoBox
| 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 |