How to position dataLabels at the midpoint of an arearange chart in highcharts?

Highcharts.chart('container', {
  chart: {
    type: 'arearange',
    zoomType: 'x',
    scrollablePlotArea: {
      minWidth: 600,
      scrollPositionX: 1
    }
  },

  title: {
    text: 'Temperature variation by day'
  },

  xAxis: {
    //type: 'datetime',
    accessibility: {
      rangeDescription: 'Range: Jan 1st 2017 to Dec 31 2017.'
    }
  },

  yAxis: {
    title: {
      text: null
    },
    labels: {
      enabled:true
    }
  },
  plotOptions: {
    arearange: {
      dataLabels: {
        enabled: true,
        yLow: 5,
        verticalAlign: 'bottom',
        inside: true,
        color: 'black',
        formatter: function(e) { 
          if((this.x==0) && (this.point.low==this.y))
            return this.series.name
        }
      }
    }
  },

  legend: {
    enabled: false
  },

  series: [{
    name: "AREA 1",
    data: [
      [0, 10],
      [0, 10],
    ],
    borderColor: 'black',
    borderWidth: 0.2,
  },
    {
    name: "AREA 2",
    data: [
     [20, 40],
     [20, 40],
    ]
  }]
});

Above is a sample piece of code that I have plotted using the arearange chart. The graph is plotted successfully just as I wanted it to be. But there seems to be a problem. I want the series name “AREA1” and “AREA2” to be shown in the midpoint of the respective y-axis values. ie “Area 1” should be shown at 5(midpoint of 0 and 10) and “Area 2” should be shown at 30(midpoint of 20 and 40). Is there any way to do that? I’ve tried with specifying yLow value in the plotOptions. But it didn’t work for me since the series data is dynamic.

The chart I’m using is highcharts and version is 4.1.5

Please help!! Thanks in advance

Answer

You can add mocked scatter series with disabled markers and enabled data labels to show the series name in the proper place:

    series: [..., {
            linkedTo: 0,
            dataLabels: {
                format: 'AREA 1'
            },
            type: 'scatter',
            data: [(area1Data[0][0] + area1Data[0][1]) / 2]
        }, {
            linkedTo: 1,
            dataLabels: {
                format: 'AREA 2'
            },
            type: 'scatter',
            data: [(area2Data[0][0] + area2Data[0][1]) / 2]
        }
    ]

---

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

API Reference: https://api.highcharts.com/highcharts/series.scatter