<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title></title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script
    type="text/javascript"
    src="//code.jquery.com/jquery-1.9.1.js"
    
  ></script>

      
</head>
<body>
    <script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<div id="container" style="width: 100%; height: 400px; margin: 0 auto"></div>


    <script type="text/javascript">//<![CDATA[


$(function() {
  $('#container').highcharts({
    chart: {
      type: 'bar',
      events: {
        load: function() {
          var dataLabelsOfPoints = this.series[0].points,
            correctedPosition;

          dataLabelsOfPoints.forEach(function(el, inx) {
            if (el.graphic.element.attributes[3].value > el.dataLabel.x) {
              correctedPosition = parseInt($(el.dataLabel.div).css("top"));
              correctedPosition -= 105;
              correctedPosition = correctedPosition + 'px';

              $(el.dataLabel.div).css('top', correctedPosition);
            }
          });
        }
      }
    },
    yAxis: {
      max: 100
    },
    plotOptions: {
      series: {
        dataLabels: {
          enabled: true,
          useHTML: true,
          inside: false
        }
      }
    },
    series: [{
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 19.5,85]
    }]
  });
});



  //]]></script>

</body>
</html>
