Standalone Navigator Demo

author(s): Mateusz Bernacik

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/navigator.js"></script>

<div id="navigator-container"></div>
<div id="chart-container"></div>
<button id="button" class="highcharts-demo-button">Get standalone navigator range</button>

CSS

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol",
        sans-serif;
}

#navigator-container {
    min-width: 600px;
    margin: 10px;
}

#chart-container {
    height: 400px;
    min-width: 600px;
}

.highcharts-demo-button {
    background: var(--highcharts-neutral-color-5, #f2f2f2);
    border: none;
    border-radius: 4px;
    color: var(--highcharts-neutral-color-100, #000);
    cursor: pointer;
    display: inline-block;
    font-size: 0.8rem;
    padding: 0.5rem 1.5rem;
    margin: 0.5rem -5px 0.5rem 10px;
    transition: background 250ms;
}

.highcharts-demo-button:hover {
    background: var(--highcharts-neutral-color-10, #e6e6e6);
}

JavaScript

(async () => {
    const usdeur = await fetch(
        'https://www.highcharts.com/samples/data/usdeur.json'
    ).then(response => response.json());

    const navigator = Highcharts.navigator('navigator-container', {
        series: [{
            data: usdeur
        }]
    });

    const chart = Highcharts.chart('chart-container', {
        xAxis: {
            type: 'datetime'
        },

        series: [{
            name: 'USD to EUR',
            data: usdeur
        }]
    });

    navigator.bind(chart);

    document.getElementById('button').addEventListener('click', () => {
        const { min, max } = navigator.getRange();

        chart.renderer.label(
            'min: ' + Highcharts.dateFormat('%Y-%m-%d', min) + '<br/>' +
            'max: ' + Highcharts.dateFormat('%Y-%m-%d', max) + '<br/>',
            100,
            100
        )
            .attr({
                fill: '#FCFFC5',
                zIndex: 8
            })
            .add();
    });
})();