Home Forums StockChart Support How to change Navigation range accordingly to range selection Reply To: How to change Navigation range accordingly to range selection



You can update the dataPoints of navigator to show only dataPoints which are in selected range on click of range buttons using rangeChanged event. Please take a look at below code snippet for updating the datapoint based on the selected range in rangeChanged event.

function rangeChanged(e) {
    var minimum = parseInt(e.minimum);
    var maximum = parseInt(e.maximum);

    if (e.source == "buttons") {
        stockChart.options.charts[0].data[0].dataPoints = dps1 = [];
        stockChart.options.navigator.data[0].dataPoints = dps2 = [];

        for (var date in completeDPS) {
            if (
                ((date >= minimum && date <= maximum) || e.index == 5) &&
            ) {
                    x: completeDPS[date].x,
                    y: completeDPS[date].y[3],

Please take a look at this JSFIddle for an example on the same.

Also, Ranges of range buttons are dependent on the datapoints present in navigator. Hence, updating the datapoints of navigator may result in disabling some of the range buttons whose ranges are outside the range of datapoints present in navigator.

Update navigator datapoints on selecting range using Range Buttons

Manoj Mohan
Team CanvasJS