React ChartsNavigator

ReactAngularVueJavascript

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

Setting an Initial Range

By default the Navigator shows the entire range of chart's data. 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.

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

API Reference