CODEWITHSUNDEEP
highchartsdata-visualization
dyingangel666
dyingangel666

Reputation: 103

Prevent y-zoom for specific series/y-axis on highcharts

I've got a spline chart with two y-axis which both use the same x-axis cycles (seconds). Zoom (xy) is enabled and works fine but now i want to zoom xy only on one series that is connected to one of the two y-axis. The other series should be static for y-axis (y-zoom disabled), so that they not zoom into y-axis... is this possible?

chart: {
        renderTo: 'container',
        type: 'spline',
        zoomType: 'xy',
        alignTicks: false,
        resetZoomButton: {
            theme: {
                display: 'none'
            }
        }
    },
    title: {
        text: '',
        x: -20 //center
    },
    legend: {
        enabled: false  //Hide the legend
    },
    credits: {
        enabled: false  //Hide credits (highcarts.com link)
    },
    exporting: {
        enabled: false  //Hide export menu
    },
    xAxis: {
        title: {
            text: 'sec'
        },
        type:'second',
        lineColor: '#666666',
        lineWidth: 2,

        endOnTick: false,
        showFirstLabel: false,
        startOnTick: true,

        gridLineWidth: 0,               //Shows a grid starting from the tick within the data content
        tickInterval:1,
        tickLength: 10,                 //Tick length (height)
        tickWidth: 2,                   //Tick width (2px)
        tickColor: '#666666',

        minorGridLineWidth: 0,          //Shows a grid starting from the tick within the data content
        minorTickInterval:.1,
        minorTickLength: 6,             //Minortick length (height -> half of tick tickLength)
        minorTickWidth: 1,              //Minortick width (1px)
        minorTickColor: '#666666',

        min: 0, //Prevent for generating sizes lower than 0 on x-axis
        max: 15,

        labels:{
            y: 25
        }
    },
    yAxis: [{
        title: {
            text: 'm/s'
        },
        gridLineWidth: 0,
        lineColor: '#8BC926',
        lineWidth: 2,

        min: 0,
        max: 200,

        offset: 15      //Space between y-axis and x-axis
    }, {
        title: {
            text: 'Bar'
        },
        gridLineWidth: 0,
        lineColor: '#389FFF',
        maxZoom: 0,
        lineWidth: 2,

        min: 0,
        max: 300
    }],
    plotOptions: {
        spline: {
            marker: {
                enabled: true
            }
        }
    },
    series: [{
        color: '#8BC926',
        data: [
            {x: 0, y: 80},
            {x: 1, y: 110},
            {x: 2, y: 100},
            {x: 3, y: 50},
            {x: 4, y: 75},
            {x: 5, y: 90}
        ],
        yAxis: 0
    },
    {
        color: '#389FFF',
        data: [
            {x: 0, y: 170},
            {x: 1, y: 210},
            {x: 2, y: 240},
            {x: 3, y: 210},
            {x: 4, y: 170},
            {x: 5, y: 100}
        ],
        yAxis: 1
    }]

JS Fiddle (Full example code)

Upvotes: 2

Views: 1179

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

It's not a part of the API, but you can use yAxis.zoomEnabled option: http://jsfiddle.net/0zczvLr9/ - just set for these axes which you don't want to enable zooming.

Upvotes: 1

Related Questions