Highcharts multi y-axis min-max issue

Question

I have a highcharts graph with three data ranges on the y-axis. Two monetary amounts and one 'survival probability' which is a percentage.

I need to restrict the range of the percentage axis to 0-100% but nothing I do seems to make any difference.

Any ideas ?

Here's the fiddle : http://jsfiddle.net/moonspace/2jnrp/

And here's (some of) the code:

jQuery('#chartContainer').highcharts({
        chart: { width: 600, height: 500 },
        title: { text: '' },
        credits: { enabled: false },
        xAxis: {
            categories: client_age_array,
            title: {
                text: 'Client age',
                style:{ color: '#000000', fontWeight: 'bold', fontSize: '12px' }
            },
            labels: { 
                step: 5,
                staggerLines: 1
            }
        },
        yAxis: [{ // First yAxis - Income
                    labels: {
                        style: {
                            color: gradTop,
                            fontSize: '12px'
                         }
                    },
                    title: {
                        text: 'Income',
                        style: {
                            color: gradTop,
                            fontSize: '12px'
                         }
                    },
                    opposite: true,
                    min: null,
                    max: null                   
                },
                { // Second yAxis - Fund value
                    gridLineWidth: 0,
                    labels: {
                        style: {
                            color: '#003466',
                            fontSize: '12px'
                         }
                    },
                    title: { 
                        text: 'Fund value',
                        style: {
                            color: '#003466',
                            fontSize: '12px'
                         }
                    },
                    min: null,
                    max: null
                },
                { // Third yAxis - Survival probability
                    gridLineWidth: 0,
                    labels: { 
                        format: '{value}%',
                        style: {
                            color: '#fe6f01',
                            fontSize: '12px'
                         }
                    },
                    title: { 
                        text: 'Survival probability',
                        style: {
                            color: '#fe6f01',
                            fontSize: '12px'
                        }
                    },
                    opposite: true,
                    min: 0,
                    max: 100
            }],
            tooltip: {
                formatter: function() {
                    var toolTip = '<b>Age : '+ this.x +'</b><br />';
                    jQuery.each(this.points, function(i, point) {
                        if( point.series.name == 'Survival probability' ){
                            if( isNaN(point.y) ){
                                // -- do nothing
                            }else{
                                toolTip += point.series.name + ' : ' + point.y + '<br />';
                            }
                        }else{
                            toolTip += point.series.name + ' : ' + point.y + '<br />';
                        }
                    });

                    return toolTip;
                },
                shared: true
            },
            navigation: {
                buttonOptions: {
                    verticalAlign: 'bottom',
                    y: -5
                }
            },          
        series: [
            {
                name: 'Income',
                type: 'column',
                yAxis: 0,
                data: income_array
            },
            {
                name: 'Fund value',
                type: 'spline',
                yAxis: 1,
                data: fund_value_array,
                marker: {
                    enabled: false
                }
            },
            {
                name: 'Survival probability',
                type: 'line',
                lineWidth: 0,
                yAxis: 2,
                data: survival_array_2
            }
        ],
        colors: [{
            linearGradient: perShapeGradient,
            stops: [ [0, gradTop], [1, gradBottom] ]
            },
            '#003466',
            '#fe6f01'
        ]
    });

Answer 1

Simply set alignTicks to false for the Survival Probability axis. That's it.