Error bar data labels

by kzoon

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
   
</figure>

JavaScript

Highcharts.chart('container', {

  xAxis: [{
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value} °C',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {

      text: '',

    }
  }],
   plotOptions: {
        series: {
            dataLabels: { 
          
                enabled: true
            }
        }
    },
 
  series: [{
    name: 'Temperature',
    type: 'spline',
    color: 'black',
    lineWidth: 0,
    zIndex: 11,
    "stickyTracking": false,
    "states": {
      "hover": {
        "lineWidthPlus": 0
      }

    },
               dataLabels: { 
           align: 'left',
           verticalAlign: 'middle',
            
            },
    data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6],
    tooltip: {
      pointFormat: '<span style="font-weight: bold; color: {series.color}">{series.name}</span>: <b>{point.y:.1f}°C</b> '
    }
  }, {
    name: 'Temperature error',
    type: 'errorbar',
    color: 'green',
    zIndex: 10,
    data: [
      [4.1, 20],
      [5.9, 8.6],
      [6.4, 12.4],
      [10.1, 15.9],
      [18.0, 20.1],
      [21.0, 24.0],
      [23.2, 25.3],
      [26.1, 27.8],
      [23.2, 23.9],
      [18.0, 21.1],
      [12.9, 14.0],
      [7.6, 10.0]
    ],
    lineWidth: 2,
    tooltip: {
      followPointer: true,
      pointFormat: '(error range: {point.low}-{point.high}°C)<br/>'
    },
     /*   dataLabels: { 
            align: 'left',
            xLow: 25,
            yLow: -15,
            xHigh: 25,
            yHigh: 10,
                enabled: true
            }
            */
  

  }]
});