highcharts - Align y-Axis labels to the right and make chart width "smaller"

Question

I have a chart with two y-Axis. One to the left of the chart another one to the right. The labels on the right y-Axis appear inside the chart. When I align the labels to the right the labels still overlap the y-Axis in some cases. When I add a distance x: 30, the distance becomes bigger but the labels are not fully shown anymore as they are outside the chart.

I want the labels to have a similar distance to the y-Axis as for the left y-Axis and still shown inside the chart "area".

Here a jsfiddle: https://jsfiddle.net/smaica/zrn87q0b/32/

And my chart options:

Highcharts.getJSON('https://demo-live-data.highcharts.com/aapl-ohlc.json', function (data) {

    Highcharts.stockChart('container', {
                title: {
        text: undefined,
    },
    series: [
    {
        data: [
          [1279324800000,0.1],
          [1279411200000,0.2],
          [1279497600000,0.3],
          [1279584000000,0.4],
          [1279670400000,0.5],
          [1279756800000,0.6],
          [1279843200000,0.7],
          [1279929600000,0.8],
          [1280016000000,0.7],
          [1280102400000,0.6],
          [1280188800000,0.5],
          [1280275200000,0.4],
          [1280361600000,0.3],
          [1280448000000,0.2],
          [1280534400000,0.1]
      ],
      name: "series1",
      yAxis: 0
    },
    {
      data: [
        [1279324800000,0.8],
        [1279411200000,0.7],
        [1279497600000,0.6],
        [1279584000000,0.5],
        [1279670400000,0.4],
        [1279756800000,0.3],
        [1279843200000,0.2],
        [1279929600000,0.1],
        [1280016000000,0.2],
        [1280102400000,0.3],
        [1280188800000,0.4],
        [1280275200000,0.5],
        [1280361600000,0.6],
        [1280448000000,0.7],
        [1280534400000,0.8]
    ],
    name: "series2",
    yAxis: 1
  }
    ],
    plotOptions: {
        series: {
            dataGrouping:{
                enabled: false
            },
            lineWidth: 1.5,
            fillOpacity: 0.5,
        }
    },
    chart: {
        borderWidth: 0,
        plotShadow: false,
        plotBorderWidth: 0,
        alignTicks: true,
        zooming: {
            type: 'x',
        },
    },
    accessibility: {
        enabled: false
    },
    yAxis: [{
        lineWidth: 0.1,
        tickWidth: 0.1,
        opposite: true,
        visible: true,
        type: 'linear',
        alignTicks: true,
        labels: {
            align:'right',
        },
    },
    {
        lineWidth: 0.1,
        tickWidth: 0.1,
        alignTicks: true,
        opposite: false,
        type: 'logarithmic',
        gridLineColor: 'transparent',
        visible: true
    }],
    xAxis: {
        lineWidth: 0.1,
        tickWidth: 0.1,
        tickLength: 5,
        min: Date.UTC(2010, 6, 1),
        ordinal: false
    },
    rangeSelector: {
        enabled: false
    },
    navigator: {
        height: 30,
        outlineWidth: 0.1,
        handles: {
            lineWidth: 0.1,
        },
        xAxis:  {
            gridLineWidth: 0.1,
            tickLength: 0,
        }
    },
    scrollbar: {
        enabled: false
            }
            }
    );
});

Thanks!

Answer 1

In Highstock, the yAxis.labels.align is right by default, but yAxis is the opposite as well. It might seem not intuitive, but you only need to change yAxis.labels.align to 'left'.

Demo: https://jsfiddle.net/BlackLabel/pt2sb60x/

API Reference: https://api.highcharts.com/highstock/yAxis.opposite