Chart interactions

Use cases

Chart interactions enable additional possibilities for end users to interact with the data plotted within the chart area. The interactive options currently supported within the TimeseriesChart, the HistogramChart and the XYChart are zoom-x, zoom in, zoom out, and pan. For the the TimeseriesChart and the HistogramChart there's also the select interaction.

To incorporate these interactions, depending on the chart, a configuration is needed:

1. For the TimeseriesChart and the HistogramChart, the ChartInteractions subcomponent must be added inside the main component (e.g. TimeseriesChart).

2. For the XYChart, every X-axis can opt-in or opt-out for enabling these interactions by specifying two props: disableZoom and disablePan (for more information, see Zoom and Pan).

The chart interaction can then either be triggered using keyboard shortcuts or by the optional chart toolbar. To enable the toolbar with the chart interactions, in the case of the TimeseriesChart and the HistogramChart, the ChartToolbar subcomponent must be added inside the main component. In the case of the XYChart, the toolbar is enabled by default and is not needed to enable any chart interactions (for more information, see Toolbar)

Explore

The explore functionality is the default mode, and it allows you to inspect the data within the chart. It includes an optional feature to select an area to zoom along the X-axis. In order to enable this option it is necessary to add the ChartInteractions.ZoomX subcomponent to the ChartInteractions component. For XYChart, this is the default mode.

You can optionally trigger this mode from the keyboard by pressing E while the chart has focus.

Pan

Once a user has zoomed into the plotted data on a chart, panning can optionally be enabled. Panning allows users to navigate left and right along the X-axis whilst in a zoomed-in state. In order to enable this functionality, the ChartInteractions.Pan subcomponent needs to be added to the ChartInteractions component. For the XYChart, this interaction is enabled by default.

You can optionally trigger this mode from the keyboard by pressing P while the chart has focus.

Once you have triggered this mode:

• Pressing ← (Left Arrow) will pan to the left. You can also press Shift to increase the speed of pan movement.
• Pressing → (Right Arrow) will pan to the right. You can also press Shift to increase the speed of pan movement.

Select

The select functionality allows users to select a specific area in the chart. Selection can be used to display detailed information about data points inside the selected area and/or to zoom in to the selected area (if the ChartInteractions.ZoomX subcomponent is added). In order to enable selection, the ChartInteractions.Select subcomponent needs to be added to the ChartInteractions component.

Select can be triggered by clicking and dragging on the chart area. To zoom in on the selected area, press Enter.

Upon selecting an area, the chart will display a tooltip with the selected area's start and end timestamps, duration of the area, and amount of data points and series. The tooltip can be dismissed by pressing Esc. Similarly to the basic tooltip, you can define custom actions.

Zoom-In and Zoom-Out

The zoom functionality allows users to zoom in to the chart's plotted data by a fixed point along the X-axis. The chart supports zoom in (incremental) and zoom out (decremental) actions.

In order to enable either of these zoom options on a chart it is necessary to add the ChartInteractions.Zoom subcomponent to the ChartInteractions component. For the XYChart, this interaction is enabled by default.

You can optionally zoom in/out different ways by first focusing the chart:

• Pressing Cmd (Ctrl in Windows) + the mouse wheel, will generate a zoom in/out trigger.
• Pressing Cmd + ↑ (Up Arrow) will zoom in.
• Pressing Cmd + ↓ (Down Arrow) will zoom out.
• Pressing Cmd + click will zoom in.
• Pressing Cmd + pressing Shift + click will zoom out.
• Pressing Cmd + clicking and dragging draws a zoom area and zooms in on mouse up.

Reset

Reset will restore the chart to its initial state.

You can optionally trigger this action from the keyboard by pressing R while the chart has focus.

• Double-clicking on any part of the chart will trigger a reset.

CodeSandbox

CodeSandbox

It's also possible to programmatically trigger all the previously described interactions by calling their methods on the TimeseriesChart instance reference. The available options are: exploreMode, zoomMode, panMode, zoomIn, zoomOut and reset.

CodeSandbox

CodeSandbox

CodeSandbox