score:1

Accepted answer

Set the minimum value for the first yAxis to 0 (with :min => 0).

See this jFiddle: http://jsfiddle.net/4u8eb/

$(function () {
    $('#container').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            labels:{
                y: 27
             },
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        }],
        series: [{
            linewidth: 4,
            name: 'Rainfall',
            color: '#4572A7',
            yAxis: 0,
            data: [9, 9, 9, 10, 9, 9, 10, 9, 9, 9,9,9],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Temperature',
            yAxis: 1,
            color: '#89A54E',
            type: 'spline',
            data: [0, 2, 24, 24, 24, 24, 24, 24, 24, 24, 24, 24],
            tooltip: {
                valueSuffix: '°C'
            }
        }, {
            name: 'baba',
            yAxis: 2,
            color: '#89A54E',
            type: 'spline',
            data: [0, 2, 44, 24, 24, 24, 24, 24, 24, 24, 24, 24],
            tooltip: {
                valueSuffix: '°C'
            }
        }],
        yAxis: [{ // Secondary yAxis
            min: 0,
            max: 10,
            tickInterval: 1,
            title: {
                text: 'Rainfall',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: '#4572A7'
                }
            }
        }, { // Primary yAxis
            opposite: true,
            min: 0,
            labels: {
                format: '{value}°C',
                style: {
                    color: '#89A54E'
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: '#89A54E'
                }
            }
        }, { // 3rd yAxis
            min:0,
            opposite: true,
            title: {
                text: 'Baba',
                style: {
                    color: '#4572A7'
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: '#4572A7'
                }
            }
        }],
        tooltip: {
            shared: true
        },
        legend: {
            enabled: false,
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: '#FFFFFF'
        },

    });
});

If you comment the minimum value for the first Axis, you get the same problem as you do. With the minimum set, the maximum value is respected.

You could also use "alignTicks: false" in the chart options, but it can get confusing visually.


Related Query

More Query from same tag