Highcharts - Gauge chart data label not positioning correctly

Question

I'm building a vertical gauge and am having problems applying a custom image in place of the default marker.

Although the image renders, it's placement is off. I can't seem to get it to point exactly where the marker is positioned and I'm not sure if applying a static offset value to the 'y' attribute is the right approach.

Here's a fiddle .

  var chart = new Highcharts.Chart({ chart: { renderTo: 'container', type: 'column', marginBottom: 25, marginTop: 70, marginLeft: 65, marginRight: 10, }, xAxis: { categories: ['One'], lineColor: 'white', labels: { enabled: false }, tickLength: 0, min: 0, max: 2 }, plotOptions: { column: { stacking: 'normal', animation: false, borderWidth: 0, } }, yAxis: { min: 0, max: 9026, tickInterval: 9026, tickLength: 0, tickWidth: 0, tickColor: '#C0C0C0', gridLineColor: '#C0C0C0', gridLineWidth: 0, minorTickInterval: 25, minorTickWidth: 0, minorTickLength: 0, minorGridLineWidth: 0, title: null, labels: { formatter: function () { if (this.isFirst || this.isLast) { return this.value; } }, x: 0 }, }, legend: { enabled: false }, series: [ { data: [4513], color: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'red'], [1, 'orange'] ] } }, { data: [4513], color: { linearGradient: { x1: 0, x2: 0, y1: 0, y2: 1 }, stops: [ [0, 'orange'], [1, 'green'] ] } }, { type: 'scatter', data: [3120], marker: { enabled: true, symbol: 'circle' }, dataLabels: { useHTML: true, formatter: function () { return '<img width="40px" height="40px" src="http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png" />' }, enabled: true, align: 'right', x: -3, y: 2, overflow: "justify" } } ] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <div id="container" style="width: 178px; height: 242px;"></div> 

Would appreciate any help, thanks!

Answer 1

You should adjust the image position via x, y properties.

      x: 0,
      y: 30,

example: https://jsfiddle.net/ptezqnbf/1/

or even better, use renderer.image and control the position directly.

    function renderImage() {
      var chart = this,
        point = chart.get('point'),
        imgWidth = 40,
        imgHeight = 40;

      if (!chart.dataLabelImg) {
        chart.dataLabelImg = this.renderer.image('http://icongal.com/gallery/image/57585/small_arrow_black_monotone_left.png', -1000, -1000, imgWidth, imgHeight).add(point.series.dataLabelsGroup);
      }

      chart.dataLabelImg.attr({
        x: point.graphic.x + (imgWidth - 15) / 2,
        y: point.graphic.y - (imgHeight - 10) / 2
      });

example: https://jsfiddle.net/tpp1gdau/1/