Highchart tooltip customization

Question

I am using highcharts and i would like to customize tooltip. My tooltip should show the reqName and reqVersion,but currently the tooltip is showing all the values of the 'tipValue' array.

When i hover over the column it shows me tooltip on each column as (1.1,1.0,1.2,1.2)

where as I would like the tooltip to show version 
1.1 for column tpReq 
1.0 for column opReq
1.2 for column Rex
1.2 for column tpReq

My xVaue is an array of ['tpReq','opReq','Rex','tpReq']
My yValue is an array of [5,8,5,1]
My tipValue is an array of ['1.1','1.0','1.2','1.2']

Here is my function to draw the highcharts

function drawchar(myXAxis,myYAxis,myTooltip)
{
   var xValue = JSON.parse(XAxis);
   var yValue = JSON.parse(YAxis);
   var tipValue = JSON.parse(myTooltip);

   var reqTypeChart = new HighCharts.Chart ({
   ...
   ...
     xAxis: {
                    categories: xValue,
                    title: { 'My Requests'
                        text: null
                    },

                },
                ....
                series: [{
                    name: 'Status',
                    data: yValue
                }],
                legend: { enabled: false },
               tooltip: {
                    formatter: function () {
                        return '<b>' + this.xValue + '</b><br/>' +
                                'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' + 
                                'AppVersion: ' + tipValue ;
                    }

...
});
}

Answer 1

I managed to solve this problem by changing the tooltip formater. So first find the index of xValue and find the corresponding tooltip value from tipValue array.

formatter: function () {
          var index = xValue.indexOf(this.xValue);
          var tip = tipValue[index];
          return '<b>' + this.xValue + '</b><br/>' +
      'IssueCount: ' + Highcharts.numberFormat(this.yValue, 0) + '</b><br/>' + 
      'AppVersion: ' + tip ;

Answer 2

Try this.

function drawchar(myXAxis, myYAxis, myTooltip) {
    var xValue = JSON.parse(myXAxis);
    var yValue = JSON.parse(myYAxis);
    var tipValue = JSON.parse(myTooltip);

    var data = [];
    $.each(xValue, function (index, val) {
        var tempObj = {
            x: val,
            y: yValue[index],
            tipValue: tipValue[index]
        }
        data.push(tempObj);

    });

    // **UPDATED ** 

   data.sort(function(a, b){ 
      if(a.x < b.x) return -1; 
      if(a.x > b.x) return 1; return 0; 
   })

    var reqTypeChart = new HighCharts.Chart({

        xAxis: {
            title: {
                text: 'My Requests'
            }
        },
        series: [
            {
                name: 'Status',
                data: data
            }
        ],
        legend: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.point.x + '</b><br/>' +
                    'IssueCount: ' + Highcharts.numberFormat(this.point.y, 0) + '</b><br/>' +
                    'AppVersion: ' + this.point.tipValue;
            }


        }
    });
}

Combine all three values into one array of objects and set that array as data source in series of highchart api. You'll get passed object inside formatter method of tooltip wrapped into this.point object.