Primary and Secondary yAxis zero on different levels

Question

my problem is that the primary and secondary yAxis zero is not on the same level. The screenshot can describe my problem better. Is there any possibility to fix this? Here is the JSFiddle

Highcharts.chart('container', {
title: {
    text: 'Stückzahl'
},
xAxis: {
    categories: ['5007.205.1.1.1', '5007.225.1.1.1', '5007.285.1.1.1'],
    labels:{
        enabled: false
    }
},
credits: {
    enabled: false
},
legend:{
    enabled: false
},
yAxis: [{
    title: {
        text: 'Stückzahl',
    },
    opposite: false
},{
    title: {
        text: 'FOR[%]',
    },
            opposite: true,
    max:100,
    min:0
}],
series: [
{
        type: 'column',
    name: 'Sollwert',
    pointWidth:30,
    grouping: false,
    color: 'rgba(0,0,0,0.1)',
    data: [2000, 1500, 1600],
    yAxis: 0
},{
        dataLabels:{
        enabled:true
    },
    type: 'column',
    grouping: false,
    pointWidth:20,
    name: 'John',
    data: [1941, 975, 1936],
    yAxis: 0
},{
        dataLabels:{
        enabled:true
    },
    color:'#ef703e',
    grouping: false,
    pointWidth:20,
    type: 'column',
    data: [-27, -15, -350],
    yAxis: 0
},{
    color:'black',
    data: [80,60,99],
    yAxis: 1,
    type: 'line'
}]

});

To post this question, I need to describe my problem better. So ignore these last lines :/

Answer 1

There is an experimental wrap on Highcharts User Voice - multiple axis alignment control. It was written some time ago but it still works.

The wrap:

/**
 * Experimental Highcharts plugin to implement chart.alignThreshold option. This primary axis
 * will be computed first, then all following axes will be aligned to the threshold.
 * Author: Torstein Hønsi
 * Last revision: 2016-11-02
 */
(function (H) {
    var Axis = H.Axis,
        inArray = H.inArray,
        wrap = H.wrap;

    wrap(Axis.prototype, 'adjustTickAmount', function (proceed) {
        var chart = this.chart,
            primaryAxis = chart[this.coll][0],
            primaryThreshold,
            primaryIndex,
            index,
            newTickPos,
            threshold;

        // Find the index and return boolean result
        function isAligned(axis) {
            index = inArray(threshold, axis.tickPositions); // used in while-loop
            return axis.tickPositions.length === axis.tickAmount && index === primaryIndex;
        }

        if (chart.options.chart.alignThresholds && this !== primaryAxis) {
            primaryThreshold = (primaryAxis.series[0] && primaryAxis.series[0].options.threshold) || 0;
            threshold = (this.series[0] && this.series[0].options.threshold) || 0;

            primaryIndex = primaryAxis.tickPositions && inArray(primaryThreshold, primaryAxis.tickPositions);

            if (this.tickPositions && this.tickPositions.length &&
                    primaryIndex > 0 &&
                    primaryIndex < primaryAxis.tickPositions.length - 1 &&
                    this.tickAmount) {

                // Add tick positions to the top or bottom in order to align the threshold
                // to the primary axis threshold
                while (!isAligned(this)) {

                    if (index < primaryIndex) {
                        newTickPos = this.tickPositions[0] - this.tickInterval;
                        this.tickPositions.unshift(newTickPos);
                        this.min = newTickPos;
                    } else {
                        newTickPos = this.tickPositions[this.tickPositions.length - 1] + this.tickInterval;
                        this.tickPositions.push(newTickPos);
                        this.max = newTickPos;
                    }
                    proceed.call(this);
                }
            }

        } else {
            proceed.call(this);
        }
    });
}(Highcharts));

All you need to do is set alignThresholds in chart options.

Highcharts.chart('container', {
  chart: {
    alignThresholds: true
  },

live example: http://jsfiddle.net/f3urehs0/