score:2

Accepted answer

You can use the setExtremes axis method to bind a dropdown event with the chart range:

var chart = Highcharts.chart('container', {
    ...,
    xAxis: {
        minRange: 0,
        ...
    }
});

document.getElementById('selectFrom')
    .addEventListener('change', function() {
        chart.xAxis[0].setExtremes(Number(this.value), chart.xAxis[0].max);
    });

document.getElementById('selectTo')
    .addEventListener('change', function() {
        chart.xAxis[0].setExtremes(chart.xAxis[0].min, Number(this.value));
    });

Live demo: http://jsfiddle.net/BlackLabel/xevgsjdo/

API Reference: https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes

score:1

Parse your JSON data and use Array.prototype.filter()

For example:

// allData is your parsed JSON data
const filteredByYear = allData.filter(function(single) {
    if (single["NSYEAR"] >= 2016 && single["NSYEAR"] <= 2018) {
        return single;
    }
});

score:1

Use filter and also typeOf NSYEAR is string so you have to convert into number:

    function getFilterDataBetweenYears(fromYear, toYear) {
        return data.filter(obj => {
            if (+obj["NSYEAR"] >= fromYear && +obj["NSYEAR"] <= toYear) {
                return obj;
            }
        });
    }

Related Query

More Query from same tag