Navigator

The navigator allows to zoom in on a portion of chart's data and then pan around the chart. This is useful in charts with lots of data and real-time charts where one wants to show a slice of time, for example sensor data for the last 20 minutes.

Showing the Navigator

The navigator is hidden by default, to enable it add the following config to the chart:

navigator: { enabled: true }

Example: Showing the Navigator

Setting the Visible Range

By default the navigator shows the whole range of chart's data in the horizontal direction. The two properties that control the range of data to show are min and max, which default to 0 and 1, respectively.

The visible range is normalized to the [0, 1] interval. For example, to show the last quarter of the chart's data by default we can use the following config:

navigator: { enabled: true, min: 0.75, max: 1 }

Regardless of the initial visible range, the user will be able to adjust the range as they see fit by dragging the range handles inside the navigator.

Styling the Navigator

The navigator's height is configurable and affects chart's layout by leaving more or less vertical space for the series:

navigator: { enabled: true, height: 50 }

The navigator component has three subcomponents that can be styled independently:

  • mask - the range mask
  • minHandle - the min drag handle
  • maxHandle - the max drag handle
The range mask shows the portion of the range selected, and the drag handles are used to adjust it.

All subcomponent configs are optional too and have default values that make the navigator look good in charts with both light and dark backgrounds.

Example: Navigator Styling

The example below uses various navigator configs (in a deliberately exaggerated way) to change the following visual attributes of the navigator:

  • range mask's fill, fill opacity and stroke width
  • fill and stroke colors of handles
  • width, height and stroke width of the left handle
  • the length of the left handle's grip lines and the distance between them

API Reference

navigator

Configuration for the chart navigator. This config is only supported by cartesian charts.

navigator: { enabled?: boolean; // default: false height?: number; // default: 30 min?: number; // default: 0 max?: number; // default: 1 mask?: IMask; minHandle?: IMinHandle; maxHandle?: IMaxHandle; }
enabledWhether or not to show the navigator.
Default: false
heightThe height of the navigator.
Default: 30
minThe start of the visible range in the [0, 1] interval.
Default: 0
maxThe end of the visible range in the [0, 1] interval.
Default: 1
maskConfiguration for the navigator's visible range mask. See mask for more details about this configuration object.
minHandleConfiguration for the navigator's left handle. See minHandle for more details about this configuration object.
maxHandleConfiguration for the navigator's right handle. See maxHandle for more details about this configuration object.

mask

navigator > mask

Configuration for the navigator's visible range mask.

navigator: { ... mask: { fill?: string; // default: '#999999' stroke?: string; // default: '#999999' strokeWidth?: number; // default: 1 fillOpacity?: number; // default: 0.2 } }
fillThe fill colour used by the mask.
Default: '#999999'
strokeThe stroke colour used by the mask.
Default: '#999999'
strokeWidthThe stroke width used by the mask.
Default: 1
fillOpacityThe opacity of the mask's fill in the [0, 1] interval, where 0 is effectively no masking.
Default: 0.2

minHandle

navigator > minHandle

Configuration for the navigator's left handle.

navigator: { ... minHandle: { fill?: string; // default: '#f2f2f2' stroke?: string; // default: '#999999' strokeWidth?: number; // default: 1 width?: number; // default: 8 height?: number; // default: 16 gripLineLength?: number; // default: 8 gripLineGap?: number; // default: 2 } }
fillThe fill colour used by the handle.
Default: '#f2f2f2'
strokeThe stroke colour used by the handle.
Default: '#999999'
strokeWidthThe stroke width used by the handle.
Default: 1
widthThe width of the handle.
Default: 8
heightThe height of the handle.
Default: 16
gripLineLengthThe length of the handle's grip lines.
Default: 8
gripLineGapThe distance between the handle's grip lines.
Default: 2

maxHandle

navigator > maxHandle

Configuration for the navigator's right handle.

navigator: { ... maxHandle: { fill?: string; // default: '#f2f2f2' stroke?: string; // default: '#999999' strokeWidth?: number; // default: 1 width?: number; // default: 8 height?: number; // default: 16 gripLineLength?: number; // default: 8 gripLineGap?: number; // default: 2 } }
fillThe fill colour used by the handle.
Default: '#f2f2f2'
strokeThe stroke colour used by the handle.
Default: '#999999'
strokeWidthThe stroke width used by the handle.
Default: 1
widthThe width of the handle.
Default: 8
heightThe height of the handle.
Default: 16
gripLineLengthThe length of the handle's grip lines.
Default: 8
gripLineGapThe distance between the handle's grip lines.
Default: 2

Next Up

Continue to the next section to learn more about markers.