Standalone Navigator

The Standalone Navigator is a versatile Highcharts component, designed to synchronize and manipulate the viewing range across multiple charts. This tool enables users to easily control the range of one or more charts by interacting with a single navigator interface. It's particularly useful in dashboards and data analysis applications where viewing different data sets in parallel is essential.

Creating the Standalone Navigator

To initialize the Standalone Navigator, use the navigator constructor with the container reference and configuration options:

Highcharts.navigator('container', {
    // Standalone Navigator configuration options
});

The configuration options for the Standalone Navigator are the same as those for a chart navigator, and can be found in the API documentation.

Including the Standalone Navigator in a Project

The Standalone Navigator can be included in a project in two ways:

  • As a separate module, alongside Highcharts:
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/navigator.js"></script>
  • As a bundled package that includes both Highcharts and the Navigator:
<script src="https://code.highcharts.com/standalone-navigator.js"></script>

Binding Charts to the Navigator

The bind method binds a chart or an axis to the Standalone Navigator. Once a chart is bound, any range adjustments made using the navigator are automatically reflected in the bound chart. See the bind method documentation for more details.

The unbind method is used to detach a chart or axis from the Standalone Navigator. This method can unbind either a single chart or all charts bound to the navigator simultaneously. Detaching charts from the navigator stops it from influencing their range. See the unbind method documentation for additional information.

Chart options

The standalone navigator renders into its own chart container. General chart options, like chart.height or chart.inverted, are set through thechartOptions option, while the height option controls the height of the navigator itself:

Highcharts.navigator('container', {
    height: 50,
    chartOptions: {
        chart: {
            height: 300
        }
    }
});

The chartOptions option replaces the deprecated chart option, which is still supported but logs error #32. If both are set, chartOptions takes precedence.

The height option applies to the navigator series area only. The scrollbar is a separate component with its own scrollbar.height, and it is rendered below the navigator, so the chart height must leave room for both. When the navigator is inverted, height still means the thickness of the navigator strip, which in that orientation runs horizontally.

Managing Navigator Range

The setRange method allows programmatic control of the navigator's range. This method not only updates the navigator's range but also synchronizes this change with all bound charts. Additionally, it triggers the setRange event.

The getRange method retrieves the current range of the Standalone Navigator, enabling users to view or use the navigator's existing range settings.

See the setRange and getRange methods documentation for more details.

API

For comprehensive information on all available features and options, refer to the API reference for the Standalone Navigator.

Edit this page