React ChartsNavigator

Enterprise

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 Copy

The navigator will reflect the zoom state that can be saved, restored and programmatically initialised and modified, using the Chart State API.

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.

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:

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:

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',
        },
    },
}