Skip to main content

User Interactions

SC Charts allows the user to interact with data in the chart in different ways depending on the selected interaction mode and its configuration. These modes include:

  • Annotate

  • Range Brush
  • X Trace
  • Slope
  • Zoom To Area
  • Pan And Zoom

The chart also includes an optional menu, legend, and overview that provide further interaction capabilities. 

Menu

The menu can be expanded or collapsed by clicking on the gear icon on the right hand side. The icon changes to an X when the menu is expanded.

Menu Buttons

NEED TO UPDATE THE SCREENSHOT - Add annotate, pause/play, clear; show gear


chartReg_interactionDesc.jpg

Download PNG

Click to download a PNG of the current chart as displayed. This includes all visible axes, pens, the legend, the overview, annotations, range brushes, x traces, and slope lines.

Annotate

Click to select the annotation interaction mode. The button background is darker when selected to indicate the current mode.

Interactions in the annotation mode are described in more detail below.

Range Brush

Click to select the range brush interaction mode. The button background is darker when selected to indicate the current mode.

Interactions in the range brush mode are described in more detail below.

X Trace

Click to select the x trace interaction mode. The button background is darker when selected to indicate the current mode.

Interactions in the x trace mode are described in more detail below.

Slope (will be Measure)

Click to select the measurement interaction mode. The button background is darker when selected to indicate the current mode.

Interactions in the measurement mode are described in more detail below.

Zoom to Area

Click to select the zoom to area interaction mode. The button background is darker when selected to indicate the current mode.

Interactions in the zoom to area mode are described in more detail below.

Pan And Zoom

Click to select the pan and zoom interaction mode. The button background is darker when selected to indicate the current mode.

Interactions in the pan and zoom mode are described in more detail below.

Clear Annotations

Click to remove all annotations from the chart. This button is only visible when there is at least one configured annotation.

Clear Range Brushes

Click to remove all range brushes from the chart. This button is only visible when there is at least one configured range brush.

Clear X Traces

Click to clear all x traces from the chart. This button is only visible when there at least one x trace was added to the chart.

Clear Measurements

Click to clear all slope lines from the chart. This button is only visible when there is at least one configured measurement.

Reset Zoom

Click to reset the axes based on the configured settings after zooming on the overview or using the pan and zoom or zoom to area interactions.

Pause / Resume Data Updates

Click to toggle between pausing or resuming data updates. By default all data is rendered as it is added to the props. Pausing data updates can be done for analysis or to create a screenshot without having new data change things.

    Legend

    ADD SCREENSHOT

    When configured, a legend with a list of all pens is shown. The color of each pen is shown to the left of its name. The legend can be moved anywhere within the chart area by clicking and dragging the handle on the right hand side.

    If configured, a checkbox appears to the left of each pen color, and clicking it toggles the visibility of that pen on the chart.

    Overview

    ADD SCREENSHOT

    The overview appears below the main chart and shows an overview of all data for all pens on a single x and y axis pair as configured. It has a selected area rectangle with handles that shows the user the x range visible in the main chart and allows the user to change the x range.

    (FROM THE SCICHARTS DOCS - NOT SURE IF WE CAN COPY IT:

    https://www.scichart.com/documentation/js/current/webframe.html#SciChartOverview.html

    Dragging or resizing the selection area on the overview will automatically update the visible range of the main chart, and zooming/panning the main chart will update the selection on the overview.)

    Annotate

    ADD SCREENSHOT

    Left

    Add Click

    Annotation

    Remove

    RightAnnotation

    Click

    Select

    Annotation

    Double

    Move Click

    Annotation

    Show

    Drag

    or

    Hide Annotation Info Box

    Range Brush

    ADD SCREENSHOT

    Left

    Add Click

    Range

    Brush

    Right

    Remove Click

    Range

    Brush

    Double

    Click

    Select

    Range

    Drag

    Brush

    Move Range Brush

    X Trace 

    ADD SCREENSHOT

    Left

    Add Click

    X

    Trace

    Right

    Remove Click

    X

    Trace

    Double

    Click

    Move

    X

    Drag

    Trace

    Measure

    ADD SCREENSHOT

    Left

    Add Click

    Measurement

    Remove

    RightMeasurement

    Click

    Select

    Measurement

    Double

    Move Click

    Measurement

    Show

    Drag

    or Hide Measurement Info Box

    Zoom to Area

    ADD SCREENSHOT

    Left

     Click

    Mouse Wheel Zoom

    This mode is configured in the chart props and is not exposed on the menu.

    Right Click

    Chart

    When enabled a user can use the mouse wheel to zoom in or out on a chart.

    Double Click

    Axis

    Each axis can be zoomed individually by using the mouse wheel when the mouse is over that axis.

    Drag

    Pan and Zoom

    ADD SCREENSHOT

    Zoom Pan

    LeftPinch ClickZoom

    X Axis Drag

    Y Axis Drag

    Zoom Extents

    When enabled and a user double clicks on the chart, zoom extents results in each axis being set to display all input data on all visible pens. When an axis is double clicked it will be set to the extent of the data for all visible pens configured on that axis.

    Right Click

    Double Click

    Drag

    Back to top