Show only used ticks in Highcharts

Question

How can I show only used area on the right Y-axis?

Highcharts.chart('container', {
		chart: {
            defaultSeriesType: 'line',
    },
    xAxis: {
            gridLineWidth: 1,
            minorGridLineWidth: 1,
            type: 'datetime',
            tickInterval: 3600 * 24 * 30 * 1000,
            labels: {
                rotation: -45,
                formatter: function () {
                		var monthNames = ["January", "February", "March", "April", "May", "June",
                        "July", "August", "September", "October", "November", "December"
                    ];
                    
                    var monthStr = monthNames[new Date(this.value).getMonth()];
                    return monthStr;
                }
            }
        },
    yAxis: [{
            title: {
                text: null
            },
            gridLineWidth: 1,
            minorGridLineWidth: 1,
                        labels: {
                formatter: function() {
                    return this.value * 100 + " %";
                }
            },
            tickInterval: 0.2,
            opposite: true,
            min: 0
    },{
                title: {
                text: null
            },
            gridLineWidth: 1,
            minorGridLineWidth: 1,
             min: 0
    }
    ],

    series: [{
            name: "left",
            data: [[1485896400000,8086.829999999999],[1488315600000,9575.62],[1490994000000,8446.84],[1493586000000,9959.93],[1496264400000,9246.06],[1498856400000,2346]],
            yAxis: 1,
            marker: {
                symbol: 'circle'
            }
        },{
            name: "right",
            data:  [[1485896400000,0.7920220246886492]
            ,[1488315600000,0.7950181534688361]
            ,[1490994000000,0.8068168576051594]
            ,[1493586000000,0.850108440799688]
            ,[1496264400000,0.8010823118430489]
            ,[1498856400000,0.8243148278285313]],
            yAxis: 0,
            colorIndex: 3,
            marker: {
                symbol: 'circle'
            }
        }]

});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container"></div>

I need to scale the right yAxis, because the values are small (79% - 85%).

Answer 1

You currently have tickInterval: 0.2 and min: 0 set for your right Y-axis. If you remove these two settings, the Y-axis will scale to fit the data. See updated fiddle: https://jsfiddle.net/935dkrqm/2/ I also put in a formatter for your tooltip, so that you can see the value of the percentage series properly.

tooltip: {
            pointFormatter: function(){
              return '<b>' + Highcharts.numberFormat(this.y * 100, 2)  + '%</b>'
              }
         }