Skip to main content

User Interaction and Control

Menu Buttons

The chart has a menu button which exposes a number of additional buttons to control various interactions.

chartReg_interactionDesc.jpg

Interaction

Object containing properties for various interactions and interaction modes

Name Description Property Type
mode Determines chart functionality Enum
panZoom Enables click-and-drag panning as well as pinch-zooming ObjectPan and Zoom
slope Allows the user to draw lines and view their slope ObjectSlope
xtrace Enables mouse coordinate information when hovered over ObjectX Trace
rangeBrush Enables range-drawing functionality ObjectRange Brush
annotation Allows user to add custom annotation to the chart Object
zoomToArea Allows the user to draw an area to zoom in to ObjectZoom to Area

ADD GRAPHIC SHOWING THE ANNOTATION????

Menu

Object containing properties for the cog icon menu

Name Description Property Type
visible Toggles visibility of the menu Boolean

PlayPause

Object containing properties for the play/pause button

Name Description Property Type
visible Toggles the visibility of the play/pause button Boolean

Download as SVG, PNG

RangeBrush

Object containing properties for the rangeBrush mode

Name Description Property Type
visible Toggles the visibility of the range brush Boolean
maxInstances The maximum number of concurrent ranges Integer

RangeBrush.Brush

Name Description Property Type
brush Object containing properties for the range brush Object
fill The color of the interior of the range brush Color
stroke The color of the stroke (outline) of the range brush Color
thickness The thickness of the range brush Integer
opacity The opacity of the range brush (1: opaque, 0: invisible)  

RangeBrush.Ranges

Name Description Property Type
ranges An array of values representing each range Array
  xAxis Sets which axis is treated as the x axis  
  start The x coordinate of the leftmost side of the range Integer
  end The x coordinate of the rightmost side of the range Integer

Range properties are stored on a per-axis basis as an array of property objects.


XTrace

Object containing properties for the xTrace mode.

image.png

Name Description Property Type
  visible Toggles the visibility of all xTrace mode functionality Boolean
  showToolTip Toggles the visibility of the tooltip Boolean
  showAxisLabels Toggles the visibility of the coordinate labels 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
  maxInstances ??? Integer

XTrace.Trace

Name Description Property Type
trace Object containing properties for tracing functionality Object
  stroke The color of the outline of the lines representing the coordinates of the mouse Color
  thickness The thickness of the lines representing the coordinates of the mouse Integer
  lineDash An array holding numeric values representing line dashing Array
  fill The color of the fill of the lines representing the coordinates of the mouse Color
  lineDash An array holding numeric values representing line dashing Array
  font The font for the text present in xTrace mode Font
  fontSize The size of the text present in xTrace mode Float

Slope

Name Description Property Type
slope Object containing properties for the slope mode Object
visible toggles the visibility for all slope mode functionality Boolean
maxInstances The maximum number of concurrent highlights Integer
line
SlopeLine

SlopeLine

Name Description Property Type
line Object containing properties for all present lines Object
stroke The color of the outline of slope mode lines Color
thickness The thickness of slope mode lines Integer
lineDash An array holding numeric values representing line dashing Array
opacity The opacity of slope mode lines (1: opaque, 0: invisible)  

Slope.Label

Name Description Property Type
label Object containing properties for the line label Object
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

Slope.AxisHighlight

Name Description Property Type
axisHighlight Object containing properties for the highlights applied to each axis when selected Object
fill The color of the axis highlight interior Color
stroke The color of the axis highlight outline Color
thickness The thickness of axis highlight outline Integer

chartReg_slope2.jpg

Finding the slope between 2 points on the chart is easy using the slope mode


ZoomToArea

Name Description Property Type
zoomToArea Object containing properties for the zoomToArea mode Object
axisHighlight Toggles the visibility of all zoomToArea functionality Boolean
animated Toggles whether the zoom is animated or instant Boolean

PanAndZoom

Name Description Property Type
pinchZoom Object containing properties for pinch-zooming PinchZoom
zoomPan Object containing properties for zooming and panning ZoomPan
visible toggles the visibility for all zoomPan mode functionality Boolean
xAxisDrag Object containing properties Object
enabled Determines whether dragging on the x axis is enabled Boolean
yAxisDrag Object containing properties Object
enabled Determines whether dragging on the y axis is enabled Boolean
zoomExtents Object containing properties Object
enabled Determines whether zoom extents are enabled Boolean

PinchZoom

Name Description Property Type
enabled Toggles pinch-zooming functionality Boolean
horizontalGrowthFactor Affects the zoom rate Float
verticalGrowthFactor Affects the zoom rate Float

ZoomPan

Name Description Property Type
enabled Toggles panning functionality Boolean
axes An object containing all axes with zoomPan functionality enabled. Object
x All x axes with zoomPan enabled Array
y All y axes with zoomPan enabled Array
executeOn The input that triggers panning Enum (add ref)

If the axes prop is left empty, Ignition will behave as though it contains all axes.

PanAndZoom.ZoomPan.xyDirection

Name Description Property Type
xyDirection Determines panning functionality on each axis  
xDirection Allows panning only on the x axis  
yDirection Allows panning only on the y axis  
xyDirection Allows free panning on both axes  

MouseWheelZoom

Object containing properties for mouse wheel zooming

Name Description Property Type Default
enabled Determines whether mouse wheel zooming is enabled Boolean true
growFactor Determines the rate of mouse wheel zooming (Should be set to a small number Float 0.001
axes An object containing all axes with zoomPan functionality enabled. Object {}
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
overview Object containing basic properties Object
visible Determines visibility Boolean
height ??? Integer
axes ??? Object
x   Array
y   Array

Annotation

Name Description Property Type
annotation Sets the annotation properties Object

Theme

Name Description Property Type
theme An object containing formats for the chart theme options Object

Theme Members

Name Description Property Type
light contains all the object members relating to the light theme mode  
dark contains all the object members relating to the dark theme mode  

chartReg_theme_light.jpg

Both the light and the dark themes have the same object members - the difference is the values of each member will likely differ depending on the color and shading requirements of the themeStyle Classes