Displaying marker with text in highchart gauge vuejs

Question

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

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-

<template>
  <highcharts :options="chartOptions"></highcharts>
</template>

<script>
import { Chart } from "highcharts-vue";

export default {
  name: "CustomGuage",
  components: {
  highcharts: Chart
},
  props: ["data", "title", "name", "min", "max", "format", "text", "x", 
  "y","target"],
  data() {
    return {
      chartOptions: {
        chart: {
         type: "solidgauge",
         marginBottom: 190
      },

    title: {
      text: this.title,
      align: "left"
    },

    pane: {
      center: ["50%", "85%"],
      startAngle: -90,
      endAngle: 90,
      size: 200,
      background: {
        innerRadius: "60%",
        outerRadius: "100%",
        shape: "arc"
      }
    },

    // the value axis
    yAxis: {
      // plotBands: {
      //   from: 60,
      //   to: 61,
      //   zIndex: 10,
      //   color: "black",
      //   thickness: "45%",
      //   outerRadius: "105%",
      //   label: {
      //     text: this.text,
      //     align: "center",
      //      x: this.x,
      //      y: this.y
      //   }
      // },
      min: 0,
      max: 100,
      stops: [
        [0.1, "#DF5353"], // green
        [0.5, "#DDDF0D"], // yellow
        [0.9, "#55BF3B"] // 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: "gauge",
        
        dial: {  // code that displays the marker
          baseLength: "100%",
          radius: "110%",
          rearLength: "-45%",
          
        },
      }
    ]
  }
 };
 },
watch: {
  data(newVal) {
    this.chartOptions.series[0].data = newVal;
   }
  }
 };

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

Answer 1

I think that you should be able to center the data label position by setting the y property which will be relative to your chart height or by setting the dataLabels.verticalAlign property to bottom .

Demo: https://codesandbox.io/s/highcharts-vue-demo-8gwky?file=/src/components/Chart.vue

dataLabels: {
  //y: -80,
  verticalAlign: 'bottom',
  borderWidth: 0,
  useHTML: true,
  format: '<div style="text-align:center">' +
    '<span style="font-size:25px">{y}</span><br/>' +
    '<span style="font-size:12px;opacity:0.4">km/h</span>' +
    '</div>'
},

API: https://api.highcharts.com/highcharts/series.solidgauge.dataLabels.verticalAlign