Interactive plots with Plotly.js

Plots in RadLab are interactive and use the Plotly.js JavaScript library to achieve the functionality.

Below, an example plot is provided where you can try out supported interactions:

• Hover over the data points on the plot to reveal tooltips with additional information;
• Click-and-drag horizontally on the main area of the plot (the area with the grid) to select a region on the horizontal (X) axis to zoom into;
• Click-and-drag vertically to change the zoom region on the vertical (Y) axis;
• Double-click in the main area to restore the original zoom level;
• Click on the instrument name in the legend on the right to focus only on the data from a single instrument.

To pan the plot or zoom beyond the currently visible region, you can interact with the axes themselves:

• Drag from the middle of the axis to pan;
• Drag from the corner of the axis to zoom beyond.

Additionally, you can change the default response to mouse drags using the toolbar in the top right of the plot. (Note that these toolbars usually only appear when you are hovering over the plot; on touch-enabled devices, however, they might always be visible).
Note: the instrument selection UI is interactive as well; however, the on-hover toolbar is not available, and only horizontal zoom and pan are supported in order to simplify time range selection.