How can I hide non-selected series and axes when using XY zoom with highcharts?

Question

We're using highcharts (highstock specifically) to graph numerous types of data. We would like to take advantage of the XY zoom type, however, it would be awesome if we could zoom in to only what was selected with the selection box.

However, when one zooms in using XY, if you select no data in another axis, the axis simply shows nothing. It would be ideal if the highlighted/selected area redrew over the entire graph.

I've tried looking at the chart object in the browser console window, and values like "series[x].visible" are the same for all the axes after the zoom. Is it even possible to accomplish what I'm asking for?

EDIT: I should note that we need to have the graphs not be layered on top of each other simply because of the amount of data we'll be showing, thats why the two charts show independently.

Fiddle: http://jsfiddle.net/cwc4em4w/

$('#container').highcharts({
    chart: {
        type: 'line',
        rightMargin: 80,
        zoomType: 'xy'
    },        

    yAxis: [{
        id: 'hi',
        height: '40%',
        top: '10%',
        title: { text: 'label 1', y: 0, x: -30, align: 'middle' },
        labels: { align: 'left', x: -25 }
    }, {
        id: 'ho',
        height: '40%',
        top: '60%',
        title: { text: 'label 2', y: 0, x: 0, align: 'middle' },
        labels: { align: 'left', x: 0 }
    }],

    xAxis: [{
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
        yAxis: 'hi'
    },{
        type: 'datetime',
        tickInterval: 24 * 3600 * 1000,
        yAxis: 'ho'
    }],

    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        yAxis: 'hi'
    },{
        data: [129.9, 171.5, 1106.4, 1129.2, 1144.0, 1176.0, 1135.6, 1148.5, 1216.4],
        pointStart: Date.UTC(2010, 0, 1),
        pointInterval: 24 * 3600 * 1000,
        yAxis: 'ho'
    }]
});

score 0 · Answer 1 · edited May 23 '17 at 12:06

Yes, it is possible, but just by handling it manually: see this fiddle.

To achieve the described behavior you could update the yAxis properties on the following legend item click handler:

plotOptions: {
    series: {
        events: {
            legendItemClick: function (e) {
                var thisIndex = this.index;
                var otherIndex = (this.index == 0) ? 1 : 0;
                var isOtherEnabled = false;
                if (this.chart.yAxis[otherIndex].options.labels.enabled) {
                    isOtherEnabled = true;
                }
                var isThisEnabled = false;
                if (this.chart.yAxis[thisIndex].options.labels.enabled) {
                    isThisEnabled = true;
                }

                if (isThisEnabled) {
                    this.chart.yAxis[thisIndex].update({
                        labels: {
                            enabled: false
                        },
                        title: {
                            text: null
                        }
                    });
                    if (isOtherEnabled) {
                        this.chart.yAxis[otherIndex].update({
                            height: '80%',
                            top: '10%'
                        });
                    }
                } else {
                    this.chart.yAxis[thisIndex].update({
                        labels: {
                            enabled: true
                        },
                        title: {
                            text: (thisIndex == 0) ? 'label 1' : 'label 2'
                        },
                        height: (isOtherEnabled) ? '40%' : '80%',
                        top: (isOtherEnabled) ? ((thisIndex == 0) ? '10%' : '60%') : '10%'
                    });
                    if (isOtherEnabled) {
                        this.chart.yAxis[otherIndex].update({
                            height: '40%',
                            top: (otherIndex == 0) ? '10%' : '60%'
                        }); 
                    }
                }
                this.chart.reflow();
            }
        }
    }
},

In addition, I saw that you were trying to align the yAxis labels' position by changing its x and y. But it makes the positioning relative to the other axis: so, at first, when applying the above snippet, you won't see the label 1 title when hiding the second serie, because it'll be positioned outside the highcharts container. To resolve that issue, just make sure to position the yAxis.offset correctly, as well as its title relative offset:

yAxis: [{
    id: 'hi',
    height: '40%',
    top: '10%',
    offset: 30,
    title: { text: 'label 1', offset: 30, align: 'middle' },
    labels: { align: 'left' }
}, {
    id: 'ho',
    height: '40%',
    top: '60%',
    offset: 30,
    title: { text: 'label 2', offset: 30, align: 'middle' },
    labels: { align: 'left' }
}],

How can I hide non-selected series and axes when using XY zoom with highcharts?

1 Answers1