Highcharts drill down margin

Question

Unfortunately, the drill up button often falls on top of the chart. I would like to apply a marginTop to the drill down graph so that the graph always falls under the button. I have used this example. As you can see, the button falls on top of the column chart. HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

$(function() {

// Create the chart
$('#container').highcharts({
chart: {
  type: 'column',
  events: {
    drilldown: function(e) {
      if (!e.seriesOptions) {
        var drilldowns = {
          'animals': {
            name: 'Cats',
            color: '#fa7921',
            drilldown: 'Cats',
            data: [
              ['2014', 10],
              ['2015', 10],
              ['2016', 15],
            ]
          }
        },
            drilldowns2 = {
              'animals': {
                name: 'Cows',
                color: '#9bc53d',
                data: [
                  ['2014', 13],
                  ['2015', 15],
                  ['2016', 15]
                ]
              }
            },
            drilldowns3 = {
              'animals': {
                name: 'Sheep',
                color: '#e55934',
                data: [
                  ['2014', 13],
                  ['2015', 15],
                  ['2016', 15]
                ]
              }
            };

        this.addSingleSeriesAsDrilldown(e.point, drilldowns[e.point.name]);
        this.addSingleSeriesAsDrilldown(e.point, drilldowns2[e.point.name]);
        this.addSingleSeriesAsDrilldown(e.point, drilldowns3[e.point.name]);
        this.applyDrilldown();
      }
    }
  }
},
title: {
  text: 'Async drilldown'
},
xAxis: {
  type: 'category'
},

legend: {
  enabled: false
},

plotOptions: {
  series: {
    stacking: 'normal',
    borderWidth: 0,
    dataLabels: {
      enabled: true
    }
  }
},

series: [{
  name: 'Cats',
  color: '#fa7921',
  data: [{
    name: 'animals',
    y: 5,
    drilldown: true
  }]
}, {
  name: 'Cows',
  color: '#9bc53d',
  data: [{
    name: 'animals',
    y: 5,
    drilldown: true
  }]
}, {
  name: 'Sheep',
  color: '#e55934',
  data: [{
    name: 'animals',
    y: 5,
    drilldown: true
  }]
}],

drilldown: {
  series: []
}
});
});

Hopefully someone knows a simple solution for this.

Answer 1

Update chart's marginTop in drilldown event:

        this.update({
          chart: {
            marginTop: 50
          }
        }, false);

and restore it in drillup event:

      this.update({
        chart: {
          marginTop: 10
        }
      }, false);

Live demo: http://jsfiddle.net/BlackLabel/a0va2b1x/

Notice that the second argument of update() is false - chart redraw is unnecessary here.