CODEWITHSUNDEEP
javascriptjqueryhighcharts
Dave
Dave

Reputation: 1

highcharts reset zoom button

I am trying to control the visibility of the Zoom Button on a highstock chart using x axis zooming only with the navigator enabled.

By default it appears with this combination the core code disables the zoom button. However there are some functions which allow you to display the button, but I cannot find one to hide it.

function createChart() {
    $('#container').highcharts('StockChart', {
        chart: {
            zoomType: "x",
            panning: true,
            panKey: "shift"
        },
        rangeSelector: {
            selected: 4
        },
        xAxis: {
            events: {
                setExtremes: xAxisExtremes
            },
        },
        yAxis: {
            labels: {
                formatter: function() {
                    return (this.value > 0 ? ' + ' : '') + this.value + '%';
                }
            },
            plotLines: [{
                value: 0,
                width: 2,
                color: 'silver'
            }]
        },
        series: seriesOptions
    });
}

function xAxisExtremes(e) {
    var chart = $('#container').highcharts();

    if (e.trigger === "zoom") {
        if (e.min && e.max) {
            chart.showResetZoom();
        } else {
            alert("Reset Zoom");
            // chart.hideResetZoom(); ????
        }
    }
}

See this fiddle for an example of what I am working with. https://jsfiddle.net/sooftcL7/3/

Tapping into the xAxis setExtremes event allows me to detect the zoom event occuring using the trigger identifier. and I can turn the button on using chart.showResetZoom();

I've tried both

chart.resetZoomButton.destroy()
chart.resetZoomButton.hide()

as suggested elsewhere, however they are not defined functions.

Any help would be appreciated.

Cheers,

D.

Upvotes: 0

Views: 5708

Answers (2)

DamianoPantani
DamianoPantani

Reputation: 1386

resetZoomButton.destroy() function can be invoked only if resetZoomButton is an object. According to Highsotck source:

For Stock charts (...) X axis zooming is already allowed by the Navigator and Range selector.

   if (zoomType === 'x') {
       chart.resetZoomButton = 'blocked'; // replaced with string
   }

So, to hack this you can simply do:

    chart: {
        zoomType:   'xz' // whatever string containg x
    }

This means that zoom type remains 'x' but you omit this ugly if statement which replaces resetZoomButton object with some random string...

Upvotes: 1

Naveen
Naveen

Reputation: 198

You have to disable navigator to remove the bottom bar and to disable rangeSelector to remove the zoom button

$('#container').highcharts('StockChart', {
    ...
    rangeSelector : {
        enabled: false
    },
    navigator: {
        enabled: false
    }
    ...
});

check this http://jsfiddle.net/CgAnW/

Upvotes: 1

Related Questions