Highcahrts adding HTML elements inside chart plot area

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 300px;width: 400px"></div>
<button id="add">Add data</button>
<button id="remove">Remove data</button>

JavaScript

var labels;
var chart = new Highcharts.Chart({

  chart: {
    renderTo: 'container'
  },

  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },

  series: []

}, function(chart) { // on complete
  if (chart.series.length < 1) {
    labels = chart.renderer.text('No Data Available', 140, 120)
      .css({
        color: '#4572A7',
        fontSize: '16px'
      })
      .add();
  }
});

$('#add').click(function() {
  if (chart.series.length < 1) {
    chart.addSeries({
      data: [Math.floor(Math.random() * 10 + 1), Math.floor(Math.random() * 10 + 1), Math.floor(Math.random() * 10 + 1), Math.floor(Math.random() * 10 + 1)]
    });
    labels.destroy();
    chart.redraw()
  }
});

$('#remove').click(function() {
  if (chart.series[0]) {
    chart.series[0].remove();
    labels = chart.renderer.text('No Data Available', 140, 120)
      .css({
        color: '#4572A7',
        fontSize: '16px'
      })
      .add();
  }
});