how to make different label for different arrows in Gauge chart in highchart

Question

I am using highChart for data manipulation in my application ,i am using highChart .So my requirement is that i will have different values and label for data in Gauge Chart for example i have 3 products and also three labels for them.Lets say Search,staffing,RPO.And Search have value 30,staffing have 40 and RPO have 67.So i am able to show three values in the chart,also i have three arrows for three products.But the problem is that i am not able to show three product name for three arrows.I am posting my code and also the screen shot.

function createAvarageTTFChart(array,region){
   var arrTTF = [];
    for(var i=0; i<array.length; i++){
    searchResultArray = array[i].split("$$##$$##");   
        arrTTF.push( [ searchResultArray[0], parseFloat(searchResultArray[1])] );       
    }    

   $(function () {

        $('.containerForDiagram3').highcharts({

            chart: {
                type: 'gauge',
                plotBackgroundColor: null,
                plotBackgroundImage: null,
                plotBorderWidth: 0,
                plotShadow: false
            },
            title: {
                text: 'Average TTF By Product'
            }, subtitle: {
                text: region
            },
            pane: {
                startAngle: -150,
                endAngle: 150,
                background: [{
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#FFF'],
                            [1, '#333']
                        ]
                    },
                    borderWidth: 0,
                    outerRadius: '109%'
                }, {
                    backgroundColor: {
                        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                        stops: [
                            [0, '#333'],
                            [1, '#FFF']
                        ]
                    },
                    borderWidth: 1,
                    outerRadius: '107%'
                }, {
                    // default background
                }, {
                    backgroundColor: '#DDD',
                    borderWidth: 0,
                    outerRadius: '105%',
                    innerRadius: '103%'
                }]
            },
            // the value axis
            yAxis: {
                min: 0,
                max: 200,
                minorTickInterval: 'auto',
                minorTickWidth: 1,
                minorTickLength: 10,
                minorTickPosition: 'inside',
                minorTickColor: '#666',
                tickPixelInterval: 30,
                tickWidth: 2,
                tickPosition: 'inside',
                tickLength: 10,
                tickColor: '#666',
                labels: {
                    step: 2,
                    rotation: 'auto'
                },
                title: {
                    text: 'Avg. TTF'
                },
                plotBands: [{
                    from: 0,
                    to: 120,
                    color: '#55BF3B' // green
                }, {
                    from: 120,
                    to: 160,
                    color: '#DDDF0D' // yellow
                }, {
                    from: 160,
                    to: 200,
                    color: '#DF5353' // red
                }]
            },

            series: [{
                name: 'PRODUCT', //here i have to show product name dynamically
                data: arrTTF,
                tooltip: {
                    valueSuffix: 'Days'
                }
            }]
        },

            function (chart) {
                if (!chart.renderer.forExport) {
                    setInterval(function () {
                        var point = chart.series[0].points[0],
                            newVal,                            
                        newVal = point.y ;
                        if (newVal < 0 || newVal >200) {
                            newVal = point.y ;
                        }               
                    }, 3000);
                }
            });
    });
   }

When i will mouseover the arrows the corresponding product name will show.!

 arrTTF.push( [ searchResultArray[0], parseFloat(searchResultArray[1])] );

searchResultArray[0] contains the label name searchResultArray1 contains the value.
enter image description here

When i will mouseover on the arrows different product names will be shown.Somebody please help.

Answer 1

You can use tooltip.formatter for managing the tooltip. It takes a function and returns what you intent to show on the tooltip for each point:

tooltip: {
        formatter: function() {

            var i = 0, j, y = this.y;               

            arrTTF.forEach(function (TTF) {

                if(TTF == y)
                {
                    j = i;
                    return;
                }

                i++;
            });                               

            return arrLabel[j] + ": " + y + ' km/h';
        }
}

I checked each point on arrTTF and got the index of the point and used it to get the same index on arrLabel. Here's the DEMO.