Highcharts sensor does not display text

Question

I am trying to create a sensor using Highcharts.

In the pressure gauge, I want to display the text on the tip of the needle, and the position of the text should change when the position of the tip of the needle changes. I already added the text at the beginning of the positioning and the end position of the sensor, I need to add the third text according to the tip of the needle.

Could you take a look and let me know how I do it?

My jsfiddle link is http://jsfiddle.net/anchika/nszqbsgx/1/

var chart = new Highcharts.Chart({
    chart: {
        type: 'gauge',
        renderTo: container,
        marginTop: -60,
        marginRight: 0,
        spacingLeft: 0,
        spacingBottom: 0,
        backgroundColor: null,
    },
    pane: {
        center: ['50%', '57%'],
        size: '75%',
        startAngle: -150,
        endAngle: 150,
        background: [{
            borderColor: '#000',
        }],
    },
    tooltip: {
        enabled: false
    },
    title: {
        text: null,
    },

    yAxis: {
        min: 0,
        max: 100,
        title: {
            y: -20,
            useHTML: true,
            text: 'graphTitle',
            style: {
                fontFamily: 'Raleway',
                fontSize: '2em',
                textAlign: 'center',
            }
        },
        labels: {
            enabled: false,

        },
        tickInterval: 16.66,
        tickWidth: 5,
        tickPosition: 'outside',
        tickLength: 10,
        tickColor: '#000',
        minorTickColor: '#000',
        lineColor: null,
        plotBands: [{
            from: 0,
            to: 33,
            color: '#00A600', // green
            outerRadius: '100%',
            thickness: '15%'
        }]
    },
    plotOptions: {
        gauge: {
            innerRadius: '90%',
            dial: {
                backgroundColor: 'rgba(0,0,0,0.4)',
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        data: [33],
        dataLabels: {
            useHTML: true,
            //format: gaugeFormat, //Modify here to change the radial center values
            borderWidth: 0,
            style:{
                fontFamily:'Raleway',
                fontWeight: 'normal',
            }, 
            x: 5,
        },
        tooltip: {
            enabled: false,
        }
    }]
     },

                                 function (chart) { // on complete
       chart.renderer.text('End Time',500,370)
        .css({
            color: '#000',
            fontSize: '16px'
        })
        .add();
    chart.renderer.text('Start Time', 240, 370)

        .css({
            color: '#000',
            fontSize: '16px'
        })
        .add();
});

Edit: I need something like a link

Answer 1

I am not sure I fully understand your question, Please check the link

var chart = new Highcharts.Chart({
    chart: {
        type: 'gauge',
        renderTo: container,
        marginTop: -60,
        marginRight: 0,
        spacingLeft: 0,
        spacingBottom: 0,
        backgroundColor: null,
    },
    pane: {
        center: ['50%', '57%'],
        size: '60%',
        startAngle: -150,
        endAngle: 150,
        background: [{
            borderColor: '#000',
        }],
    },
    tooltip: {
        enabled: false
    },
    title: {
        text: null,
    },

    yAxis: {
        min: 0,
        max: 100,
        title: {
            y: -20,
            useHTML: true,
            text: 'graphTitle',
            style: {
                fontFamily: 'Raleway',
                fontSize: '2em',
                textAlign: 'center',
            }
        },
        labels: {
            enabled: false,

        },
        tickInterval: 16.66,
        tickWidth: 5,
        tickPosition: 'outside',
        tickLength: 10,
        tickColor: '#000',
        minorTickColor: '#000',
        lineColor: null,
        plotBands: [{
            from: 0,
            to: 33,
            color: '#00A600', // green
            outerRadius: '100%',
            thickness: '15%'
        }]
    },
    plotOptions: {
        gauge: {
            innerRadius: '90%',
            dial: {
                backgroundColor: 'rgba(0,0,0,0.4)',
            }
        }
    },
    credits: {
        enabled: false
    },
    series: [{
        data: [100],
        dataLabels: {
            useHTML: true,
            //format: gaugeFormat, //Modify here to change the radial center values
            borderWidth: 0,
            style:{
                fontFamily:'Raleway',
                fontWeight: 'normal',
            }, 
            x: 5,
        },
        tooltip: {
            enabled: false,
        }
    }]
     },

                                 function (chart) { // on complete
      console.log(chart); chart.renderer.text(chart.series[0].data[0].y,140+chart.series[0].data[0].y*2,350)
        .css({
            color: '#000',
            fontSize: '16px'
        })
        .add();

});