Issue while Dynamically Modifying yAxis Extremes in Highchart

Question

I find a small problem while using setExtremes function in modifying yAxis extremes of Highchart. Sample is in jsfiddle --> http://jsfiddle.net/dhjqoycm/

HTML

<script src="//code.highcharts.com/4.1.4/highcharts.js"></script>
<div id="container"></div>
<input id="btnSetExtremes1" type="button" value="chart.yAxis[0].setExtremes(-38,65)"></input>
<br/>
<br/>
<input id="btnSetExtremes2" type="button" value="chart.yAxis[0].setExtremes(-100,100)"></input>
<br/>
<br/>
<input id="btnRevertToOriginal" type="button" value="Revert to Original Extremes"></input>
<br/><hr>
<label><b><u>Test with Your Own Extremes</u></b></label>
<br/><br/>
<input id="txtMin" type="textbox" placeholder="Enter Min Extreme"></input>
<input id="txtMax" type="textbox" placeholder="Enter Max Extreme"></input>
<input id="btnSetManualExtremes" type="button" value="Set Extremes to Chart"></input>

JAVASCRIPT

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },  
        legend: {
            enabled: false
        },
        series: [{
            name: 'Vancouver',
            data: [-29.9, -26.3, -20.8, -15.75, -11.9, -5.6, 0.6, -10.5, -16.8, -23.3, -28, {
                dataLabels: {
                    enabled: true,
                    align: 'right',
                    formatter: function () {
                        return this.series.name;
                    },
                    x: 0,
                    verticalAlign: 'bottom'
                },
                y: -28
            }]
        }]
    });

    var iOriginalMinExtreme = $('#container').highcharts().yAxis[0].getExtremes().min;
    var iOriginalMaxExtreme = $('#container').highcharts().yAxis[0].getExtremes().max;

    // the setExtremes1 button action
    $('#btnSetExtremes1').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes(-38, 65);
    });

    // the setExtremes2 button action
    $('#btnSetExtremes2').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes(-100, 100);
    });

    // the setExtremes2 button action
    $('#btnRevertToOriginal').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes(iOriginalMinExtreme, iOriginalMaxExtreme);
    });

    // the setExtremes2 button action
    $('#btnSetManualExtremes').click(function () {
        var chart = $('#container').highcharts();
        chart.yAxis[0].setExtremes($('#txtMin').val(), $('#txtMax').val());
    });

});

In the above jsfiddle sample, when "chart.yAxis[0].setExtremes(-100,100)" button is clicked , the yAxis extremes are set from -100 to 100 which is perfect. When "chart.yAxis[0].setExtremes(-38,65)" is clicked, the yAxis extremes are expected to be from-38 and 65 (as per the input given), but the actual extremes that are set in chart are from -50 to 75.

Is there any way that extremes shown in the graph will be as same as the input given? In this case, chart should show yAxis extremes from -38 to 65 and not -50 to 75.

Thanks.

Answer 1

Set startOnTick and endOnTick to false, see: http://jsfiddle.net/dhjqoycm/30/ If you want to display last tick and first tick, you can write your own tickPositioner. However, I'm not sure what interval between ticks should be use for extremes: (-38, 65). The range is 103, which can't be rounded nicely.