dataLabels position settings for area chart - Javascript highcharts

Javascript examples for highcharts:Chart Label

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Label

Description

dataLabels position settings for area chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//from w w w.j  a  v a 2 s  .c o  m
  $('#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> 
   </head> 
   <body> 
      <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>  
   </body>
</html>

Related Tutorials