Framework:Javascript Data GridAngular Data GridReact Data GridVue Data 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: {
    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: {
    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

Properties available on the AgNavigatorOptions interface.

enabled
boolean
Whether or not to show the navigator.
Default: false
height
PixelSize
The height of the navigator.
Default: 30
height: PixelSize;

type PixelSize = number
margin
PixelSize
The distance between the navigator and the bottom axis.
Default: 10
margin: PixelSize;

type PixelSize = number
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
AgNavigatorMaskOptions
Configuration for the navigator's visible range mask.
mask: AgNavigatorMaskOptions;

interface AgNavigatorMaskOptions {
  // The fill colour used by the mask. 
  fill?: CssColor;
  // The stroke colour used by the mask. 
  stroke?: CssColor;
  // The stroke width used by the mask. 
  strokeWidth?: PixelSize;
  // The opacity of the mask's fill in the `[0, 1]` interval, where `0` is effectively no masking. 
  fillOpacity?: Opacity;
}

type CssColor = string

type PixelSize = number

type Opacity = number
minHandle
AgNavigatorHandleOptions
Configuration for the navigator's left handle.
minHandle: AgNavigatorHandleOptions;

interface AgNavigatorHandleOptions {
  // The fill colour used by the handle. 
  fill?: CssColor;
  // The stroke colour used by the handle. 
  stroke?: CssColor;
  // The stroke width used by the handle. 
  strokeWidth?: PixelSize;
  // The width of the handle. 
  width?: PixelSize;
  // The height of the handle. 
  height?: PixelSize;
  // The distance between the handle's grip lines. 
  gripLineGap?: PixelSize;
  // The length of the handle's grip lines. 
  gripLineLength?: PixelSize;
}

type CssColor = string

type PixelSize = number
maxHandle
AgNavigatorHandleOptions
Configuration for the navigator's right handle.
maxHandle: AgNavigatorHandleOptions;

interface AgNavigatorHandleOptions {
  // The fill colour used by the handle. 
  fill?: CssColor;
  // The stroke colour used by the handle. 
  stroke?: CssColor;
  // The stroke width used by the handle. 
  strokeWidth?: PixelSize;
  // The width of the handle. 
  width?: PixelSize;
  // The height of the handle. 
  height?: PixelSize;
  // The distance between the handle's grip lines. 
  gripLineGap?: PixelSize;
  // The length of the handle's grip lines. 
  gripLineLength?: PixelSize;
}

type CssColor = string

type PixelSize = number

Next Up

Continue to the next section to learn more about markers.