title: Displaying marker with text in highchart gauge vuejs
body: <p>i wanted to display a marker with text to shows a target in my highchart gauge. I have displayed the marker like the image below. I want to display a label beside the marker to show some text</p>
  <p><a href="https://i.stack.imgur.com/oDcKv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oDcKv.png" alt="The " /></a></p>
  <p>i found some code online where we use datalabels but then the label is manually positioned using x,y coordinates. My data comes from a database so i cannot have a fixed position as the data can change anytime. The code is displayed below-</p>
  <pre><code>&lt;template&gt;
    &lt;highcharts :options=&quot;chartOptions&quot;&gt;&lt;/highcharts&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { Chart } from &quot;highcharts-vue&quot;;
  
  export default {
    name: &quot;CustomGuage&quot;,
    components: {
    highcharts: Chart
  },
    props: [&quot;data&quot;, &quot;title&quot;, &quot;name&quot;, &quot;min&quot;, &quot;max&quot;, &quot;format&quot;, &quot;text&quot;, &quot;x&quot;, 
    &quot;y&quot;,&quot;target&quot;],
    data() {
      return {
        chartOptions: {
          chart: {
           type: &quot;solidgauge&quot;,
           marginBottom: 190
        },
  
      title: {
        text: this.title,
        align: &quot;left&quot;
      },
  
      pane: {
        center: [&quot;50%&quot;, &quot;85%&quot;],
        startAngle: -90,
        endAngle: 90,
        size: 200,
        background: {
          innerRadius: &quot;60%&quot;,
          outerRadius: &quot;100%&quot;,
          shape: &quot;arc&quot;
        }
      },
  
      // the value axis
      yAxis: {
        // plotBands: {
        //   from: 60,
        //   to: 61,
        //   zIndex: 10,
        //   color: &quot;black&quot;,
        //   thickness: &quot;45%&quot;,
        //   outerRadius: &quot;105%&quot;,
        //   label: {
        //     text: this.text,
        //     align: &quot;center&quot;,
        //      x: this.x,
        //      y: this.y
        //   }
        // },
        min: 0,
        max: 100,
        stops: [
          [0.1, &quot;#DF5353&quot;], // green
          [0.5, &quot;#DDDF0D&quot;], // yellow
          [0.9, &quot;#55BF3B&quot;] // red
        ],
        //  minColor: '#DF5353',
        //   maxColor: '#55BF3B',
        lineWidth: 0,
        tickWidth: 0,
        minorTickInterval: null,
        tickAmount: 2,
        title: {
          y: -70
        },
        labels: {
          y: 16
        }
      },
  
      credits: {
        enabled: false
      },
      plotOptions: {
        solidgauge: {
          dataLabels: {
            y: -1,
            borderWidth: 0,
            useHTML: true
          }
        }
      },
  
      series: [
        {
          name: this.name,
          data: this.data,
          dataLabels: {
            format: this.format
          }
        },
        {
          data: this.target, // value at where the marker is rendered
          dataLabels: {
            enabled: false
          },
          tooltip: {
            enabled: false
          },
          type: &quot;gauge&quot;,
          
          dial: {  // code that displays the marker
            baseLength: &quot;100%&quot;,
            radius: &quot;110%&quot;,
            rearLength: &quot;-45%&quot;,
            
          },
        }
      ]
    }
   };
   },
  watch: {
    data(newVal) {
      this.chartOptions.series[0].data = newVal;
     }
    }
   };
  </code></pre>
    
  <p>I wanted to know if there was a way to put a label beside the marker that would automatically display wherever the marker is placed depending on the data from the database without manually putting the position of the label</p>