Highchart with dynamic scale for both series

Question

Question is related to this one.

Problem : Currently I have chart with 2 series - one serie with positive and one with negative values. By default each serie has dynamic scaling but they are not relating (I mean if 20 for first serie is MAX value and 5 for second serie is MAX, then it looks on graph like the same). When I set max and min values to yAxis, it solve problem, but adds to much empty space, that for some cases column is too small. Can I update chart setting to have dynamic scalling but one for both series?

Here is my example with setted MAX and MIN values for yAxis http://jsfiddle.net/futw5e8k/6/

Highcharts.chart('container', {

chart: {
    type: 'column'
},

title: {
    text: null
},

xAxis: {
    categories: ['13-17', '18-24', '25-34', '35-44', '45-54', '55-64', '65+'],
    offset: -150,
    lineWidth: 0,
    tickWidth: 0
},

yAxis: [{
    title: {
        text: null,
    },

    top: 50,
    height: 124,
    min: 0,
    max: 100,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
        minorGridLineWidth: 0,
    labels: {
        enabled: false
    }
},{
        title: {
        text: null
    },
    top: 200,
    height: 150,
    offset: 0,
    min: -100,
    max: 0,
    gridLineColor: 'transparent',
    gridLineWidth: 0,
        minorGridLineWidth: 0,
    labels: {
        enabled: false
    }
}],

plotOptions: {
        column: {
            dataLabels: {
                enabled: true,
                crop: false,
                overflow: 'none',
                formatter: function() {
                        return Math.abs(this.y);
                        }
            }
        }
    },
    tooltip: {
    formatter: function() {
        return this.x + '<br/>' + this.series.name + ': ' + Math.abs(this.y);
    }
},
series: [{
    name: 'John',
    data: [1, 13, 20, 19, 15, 7, 2]
}, {
    name: 'Joe',
    yAxis: 1,
    data: [-0.35, -6, -9, -16, -3, -1.5, -0.25]
}]

});

Answer 1

On load event you can find the maximum of your data and dynamically update axes' max - see Axis.update().

  chart: {
type: 'column',
events: {
  load: function() {
    const max = Math.max(this.series[0].dataMax, this.series[1].dataMax);

    this.yAxis[0].update({
      max: max,
    }, false);

    this.yAxis[1].update({
      max: max,
      top: 130
    }, false);

    this.redraw(false);
  }
}
},

example: http://jsfiddle.net/futw5e8k/7/