Highchart axis max with multiple axes

Question

I'm using multiple axes and I set one axis to use a max. If it is the only axis shown then the max works ok, just what I want. But if another axis is also shown the first axis max can change to be a bigger value. How can I get it to show its max, and not above it?

To see this go to http://jsfiddle.net/bx9sB/ . This has 3 axis, and the temperature axis has a max of 30. Untick all the axes, and then click the Temperature. The max is 30, great. Next click to show the Pressure axis. Now the temperature axis has gone up to 35, instead of 30. How can I get it to stay on 30.

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Weather Data for Tokyo'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                formatter: function() {
                    return this.value +'°C';
                },
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: '#89A54E'
                }
            },
            opposite: true,                
            max: 30

        }, { // Secondary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Rainfall',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' mm';
                },
                style: {
                    color: '#4572A7'
                }
            }

        }, { // Tertiary yAxis
            gridLineWidth: 0,
            title: {
                text: 'Sea-Level Pressure',
                style: {
                    color: '#AA4643'
                }
            },
            labels: {
                formatter: function() {
                    return this.value +' mb';
                },
                style: {
                    color: '#AA4643'
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 80,
            floating: true,
            backgroundColor: '#FFFFFF'
        },
        series: [{
            name: 'Rainfall',
            color: '#4572A7',
            type: 'column',
            yAxis: 1,
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Sea-Level Pressure',
            type: 'spline',
            color: '#AA4643',
            yAxis: 2,
            data: [1016, 1016, 1015.9, 1015.5, 1012.3, 1009.5, 1009.6, 1010.2, 1013.1, 1016.9, 1018.2, 1016.7],
            marker: {
                enabled: false
            },
            dashStyle: 'shortdot',
            tooltip: {
                valueSuffix: ' mb'
            }

        }, {
            name: 'Temperature',
            color: '#89A54E',
            type: 'spline',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
            tooltip: {
                valueSuffix: ' °C'
            }
        }]
    });
});

score 4 · Accepted Answer · answered Jul 11 '13 at 16:38

4

Set alignTicks:false

example:

http://jsfiddle.net/jlbriggs/bx9sB/4/

alignTicks:false

answered Jul 11 '13 at 16:38

jlbriggs

17,612
4
35
56

Thanks this works for both the jsfiddle in the question, and also this jsfiddle http://jsfiddle.net/bx9sB/3/ with min, max on the 3rd axis. – user2573014 Jul 12 '13 at 08:15
If the grid lines look messy, it's a good idea to hide them for the secondary axis by setting gridLineWidth to 0. As used above in question. – Afzal Masood Aug 02 '17 at 13:36

score 1 · Answer 2 · answered Jul 11 '13 at 14:31

1

You should set min parameter as 0, then all should work properly.

http://jsfiddle.net/bx9sB/1/

answered Jul 11 '13 at 14:31

Sebastian Bochan

37,348
3
49
75

Hmmm, this doesn't seem to work for the 3rd axis. On http://jsfiddle.net/bx9sB/2/ I set a min: 1005, max:1025 for the Pressure axis, but it then has a max of 1030 when all the axes are shown. – user2573014 Jul 11 '13 at 15:01

Highchart axis max with multiple axes

2 Answers2