My column series issue

author(s): Torstein Hønsi

by saurabhkolhe

HTML

<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/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

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

JavaScript

Highcharts.chart('container', {
  chart: {
    type: 'column',
    marginTop: 100
  },
  title: {
    text: 'Corn vs wheat estimated production for 2020',
    align: 'left'
  },
  subtitle: {
    text: 'Source: <a target="_blank" ' +
      'href="https://www.indexmundi.com/agriculture/?commodity=corn">indexmundi</a>',
    align: 'left'
  },
  xAxis: {
    categories: ['USA', 'China', 'Brazil'],
    crosshair: true,
    accessibility: {
      description: 'Countries'
    }
  },
  yAxis: {
    min: 0,
    title: {
      text: '1000 metric tons (MT)'
    },
    max: 400000
  },
  tooltip: {
    valueSuffix: ' (1000 MT)'
  },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
    }
  },
  series: [{
      name: 'Corn',
      data: [406292, 260000, 107000],
      "dataLabels": {
        formatter: function(label) {
          // Get the tallest column height.
          var tallestColumnHeight = 40
          var offset = tallestColumnHeight + 10;
          /* this.attr({
            transform: 'translate(50, -' + offset + ')',
            visibility: "visible"
          }); */
         /*  label.transform = 'translate(50, ' + offset + ')'; 
          label.visibility= "visible"; */
          /* debugger */
          this.series.dataLabelsGroup.visibility = "visible"
          
          
          return this.y; 
        },
        "enabled": true,
        "eQPosition": 1,
        "borderWidth": 0,
        "style": {
          "fontSize": "1rem",
          "fontFamily": "Open Sans",
          "fontWeight": "normal",
          "fontStyle": "normal",
          "textDecoration": "none",
          "color": "#000000",
          "textOutline": ""
        },
        "align": "center",
        "inside": false,
        "rotation": 0,
        "overflow": "justify",
        "crop": false,
        "allowOverlap": true
      },
    }

  ]
});