LinkedYaxis

by Haze32

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.chart('container', {
  chart: {
    marginRight: 80,
    events: {
      render: function() {
        let ren = this.renderer,
          data = this.series[1].data[1]

        if (this.customDataLabels) {
          this.customDataLabels.destroy()
          this.customDataLabels = undefined
        }
        this.customDataLabels = this.renderer.g('customDataLabels').add()

        
          let distX = this.xAxis[0].toPixels(data.x)
					
          ren.text("test", distX + 5, 35).attr({
            fill: 'red',
            stroke: 'red',
            'stroke-width': 1
          }).add(this.customDataLabels);
    
      }
    }
  },
  xAxis: {
    categories: ['A', 'B', 'C']
  },
  yAxis: [{
    title: {
      text: 'Value Low Range'
    }
  }, {
    title: {
      text: 'Value High Range'
    },
    opposite: true,
    linkedTo: 0
  }],
  plotOptions: {
    column: {
      dataLabels: {
        enabled: true
      }
    }
  },

  series: [{
    type: 'column',
    data: [30, 40, 35],
    name: 'Value1'
  }, {
    type: 'column',
    data: [2000, 3000, 4000],
    name: 'Value2',
    yAxis: 1
  }]
});