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 maskminHandle - the min drag handlemaxHandle - 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.
| boolean | Whether or not to show the navigator. Default: false |
| PixelSize | The height of the navigator. Default: 30 height: PixelSize;
type PixelSize = number
|
| PixelSize | The distance between the navigator and the bottom axis. Default: 10 margin: PixelSize;
type PixelSize = number
|
| number | The start of the visible range in the [0, 1] interval. Default: 0 |
| number | The end of the visible range in the [0, 1] interval. Default: 1 |
| 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
|
