dataLabels position issue for area chart (Highcharts)

Question

Area chart with Highcharts

I Created area chart jsfiddle.click on the above link to find out my code for your reference.

How to display the values like an uploaded image.

Answer 1

This can be done by using the load event like this:

chart: {
  type: 'area',
  inverted: false,
  events: {
    load: function() {
      let pointLabelPositions = []
      let labelSeries = this.series[0]
      let otherSeries = this.series[1]
      for (var i = 0; i < labelSeries.data.length; i++) {
        pointLabelPositions.push({
          dataLabels: {
            y: (otherSeries.data[i].plotY - labelSeries.data[i].plotY) / 2
          }
        })
      }
      labelSeries.update({
        data: pointLabelPositions
      })
    }
  }
},

$(function() {
  $('#container').highcharts({
    chart: {
      type: 'area',
      inverted: false,
      events: {
        load: function() {
          let pointLabelPositions = []
          let labelSeries = this.series[0]
          let otherSeries = this.series[1]
          for (var i = 0; i < labelSeries.data.length; i++) {

            pointLabelPositions.push({
              dataLabels: {
                y: (otherSeries.data[i].plotY - labelSeries.data[i].plotY) / 2
              }
            })
          }
          labelSeries.update({
            data: pointLabelPositions
          })
        }
      }
    },
    title: {
      text: 'Average fruit consumption during one week'
    },
    tooltip: {
      enabled: false
    },
    subtitle: {
      style: {
        position: 'absolute',
        right: '0px',
        bottom: '40px'
      }
    },
    legend: {
      layout: 'vertical',
      align: 'left',
      verticalAlign: 'top',
      x: -150,
      y: 100,
      floating: true,
      borderWidth: 1,
      backgroundColor: '#FFFFFF'
    },

    xAxis: {
      categories: [
        'Jan',
        'Feb',
        'Mar',
        'Apr',
        'May',
        'Jun',
        'Jul',
        'Aug',
        'Sep',
        'Oct',
        'Nov',
        'Dec'
      ]
    },
    yAxis: {
      title: {
        text: 'Number of units'
      },
      labels: {
        formatter: function() {
          return this.value;
        }
      },
      min: 0
    },
    plotOptions: {
      area: {

        fillColor: {
          pattern: {
            path: {
              d: 'M 0 0 L 10 10 M 9 -1 L 11 1 M -1 9 L 1 11',
              strokeWidth: 0.8
            },
            width: 0.5,
            height: 2,
            opacity: 0.9,
          }
        }
      }
    },

    series: [{
      name: 'John',
      data: [10.2, 11, 10.9, 10.1, 10, 10.3, 10.2, 11.1, 11, 10.5, 10.6, 10.9],
      dataLabels: {
        enabled: true,
        formatter: function() {
          var secondY = this.series.chart.series[1].yData[this.point.x],
            firstY = this.y;
          return firstY - secondY;
        }
      },
      color: '#FFERE',
      fillColor: {
        pattern: {
          color: '#77d4a1'
        }
      }
    }, {
      name: 'Jane',
      data: [2.1, 2.2, 2, 2, 2.3, 2.4, 2.1, 2.3, 2.1, 2.4, 3.5, 3],
      color: '#FFERE',
      fillColor: {
        pattern: {
          color: 'hsl(0, 0%, 98%)'
        }
      }
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/pattern-fill.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Working fiddle example: http://jsfiddle.net/7gvuA/22/