Basic problem with Highchart's showResetZoom and setExtremes

Question

this may seem a noob's question but when I try to use setExtremes or showResetZoom on my xAxis, I get this in the console: Uncaught TypeError: copt.xAxis.setExtremes is not a function

However my xAxis is correctly defined and works perfectly on plenty of other functions. I've copy-pasted code from several jsfiddler examples, but no way...

Here is my code:

Abs_ChartOptions= {
    chart: {
        zoomType: 'xy',
        resetZoomButton: {
            position: {
                verticalAlign: 'top',
                y: -50
            },
        }
    },
    title: { text: ''},
    xAxis:{
        type: 'datetime',
        labels: { format: '{value: %d/%m/%Y}'},
        tickInterval: 24*36e5, //24h
        title:{ text: 'Date'},
        crosshair: true,
    },
    yAxis: [{
        title: { text: ''},
        alternateGridColor: '#FDFFD5',
        crosshair: true
    }],
    series: []
}

And on call site, after defining the series and the xMin/xMax values(which are correctly set on their way):

        copt= clone(Abs_ChartOptions);
        copt.xAxis.setExtremes(xMin,xMax);
        copt.showResetZoom();

I've tried using directly Abs_ChartOptions instead of a clone, same issue.

NB: Using copt.xAxis.min= xMin; copt.xAxis.max= xMax; works fine for zooming, but I don't get the "reset zoom" buttton.

What did I miss? Is there some extra module needed or whatever ? Thx in advance

ppotaczek · Answer

You need to call both methods on a chart instance, not on the options configuration object.

const Abs_ChartOptions = {
    ...
};

const chart = Highcharts.chart('container', Abs_ChartOptions);

chart.xAxis[0].setExtremes(1, 3);
chart.showResetZoom();

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

API Reference: https://api.highcharts.com/class-reference/Highcharts.Chart

Basic problem with Highchart's showResetZoom and setExtremes

1 Answers