Framework:Javascript GridAngular GridReact GridVue Grid

Angular Charts: 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

enabled
boolean
Whether or not to show the navigator.
Default: false
height
number
The height of the navigator.
Default: 30
margin
number
The distance between the navigator and the bottom axis.
Default: 10
min
number
The start of the visible range in the [0, 1] interval.
Default: 0
max
number
The end of the visible range in the [0, 1] interval.
Default: 1
mask
Configuration for the navigator's visible range mask.
See mask for more details.
minHandle
Configuration for the navigator's left handle.
See minHandle for more details.
maxHandle
Configuration for the navigator's right handle.
See maxHandle for more details.

mask

navigator > mask

Configuration for the navigator's visible range mask.

fill
string
The fill colour used by the mask.
Default: '#999999'
stroke
string
The stroke colour used by the mask.
Default: '#999999'
strokeWidth
number
The stroke width used by the mask.
Default: 1
fillOpacity
number
The 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.

fill
string
The fill colour used by the handle.
Default: '#f2f2f2'
stroke
string
The stroke colour used by the handle.
Default: '#999999'
strokeWidth
number
The stroke width used by the handle.
Default: 1
width
number
The width of the handle.
Default: 8
height
number
The height of the handle.
Default: 16
gripLineLength
number
The length of the handle's grip lines.
Default: 8
gripLineGap
number
The distance between the handle's grip lines.
Default: 2

maxHandle

navigator > maxHandle

Configuration for the navigator's right handle.

fill
string
The fill colour used by the handle.
Default: '#f2f2f2'
stroke
string
The stroke colour used by the handle.
Default: '#999999'
strokeWidth
number
The stroke width used by the handle.
Default: 1
width
number
The width of the handle.
Default: 8
height
number
The height of the handle.
Default: 16
gripLineLength
number
The length of the handle's grip lines.
Default: 8
gripLineGap
number
The distance between the handle's grip lines.
Default: 2

Next Up

Continue to the next section to learn more about markers.