The Navigator provides controls for users to zoom and pan around a chart. It can also include a Mini Chart to show the entire dataset.
The Navigator is disabled by default, to enable it add the following config to the chart:
navigator: {
enabled: true,
}
Save & Restore
The navigator will reflect the zoom state that can be saved, restored and programmatically initialised and modified, using the Chart State API.
Mini Chart
The Mini Chart gives an overview of the full data of the chart to provide more context when zoomed in.
The Mini Chart is disabled by default, and can be enabled in the miniChart options on the Navigator.
navigator: {
miniChart: {
enabled: true,
},
}
All series in the main chart will be shown in the Mini Chart. Use the showInMiniChart property on each series for finer control.
Customisation
Styling the Navigator
The Navigator's height is configurable and affects the 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, and have default values that make the Navigator look good in charts with both light and dark backgrounds.
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 colours 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
Styling the Mini Chart
The labels on the Mini Chart axis can be styled using the label property. See the API Reference for a list of all available options.
navigator: {
miniChart: {
enabled: true,
label: {
fontSize: 20,
fontWeight: 'bold',
},
},
}