My Highcharts graph with multiple axis ignores the max value I set for the first yaxis

Question

I have this chart with multiple axis.

It's coded with the Ruby gem lazy_high_charts, but only difference from Highcharts is the Ruby syntax.

My problem is that I've set the first yAxis to have a :max => 10, as no values will ever be higher than 10. For some reason though, this is being ignored. Any ideas?

@rating_development = LazyHighCharts::HighChart.new('graph') do |f|
  f.title(:text => "Some title")
  f.xAxis(:categories => categories, :tickInterval => categories.size / 10, :labels => {:y => 27})
  f.series(:name => "1st thing", :color => "#000000", :lineWidth => 4, :yAxis => 0, :data => first_data_set, :marker => { :enabled => false })
  f.series(:name => "2nd thing", :color => "#0030ff", :yAxis => 1, :data => second_data_set, :marker => { :enabled => false }, :dash_style => 'shortdot')
  f.series(:name => "3rd thing", :color => "#ff0006", :yAxis => 2, :data => third_data_set, :marker => { :enabled => false }, :dash_style => 'shortdot')

  f.yAxis [
    {:title => {:text => "1st thing", :style => {:color => "#000000"}}, :tickInterval => 1, :max => 10, :plotBands => [{:color => '#af0000', :from => 0, :to => 3}, {:color => '#df7000', :from => 3, :to => 5}, {:color => '#f4d600', :from => 5, :to => 7}, {:color => '#87b014', :from => 7, :to => 9}, {:color => '#5aa417', :from => 9, :to => 10}], :labels => {:style => {:color => "#000000"}}},
    {:title => {:text => "2nd thing", :style => {:color => "#0030ff"}}, :opposite => true, :min => 0, :labels => {:style => {:color => "#0030ff"}}},
    {:title => {:text => "3rd thing", :style => {:color => "#ff0006"}}, :opposite => true, :min => 0, :labels => {:style => {:color => "#ff0006"}}}
  ]
  f.legend(:enabled => false)
end

Answer 1

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.