Show Data For Grouped Series in ToolTip Highcharts

Question

I am creating chart using Highcharts but i want to show a value in tooltip for every grouped series it is dynamic and chart is creating in ajax success therefore every groped series have different value to show in tooltip

Here is a image of chart :

This tooltip is shown for every group with heading of Categories each so i want to add a sub heading with dynamic value coming from ajax success

This is fiddle : http://jsfiddle.net/KWPsv/80/

This what i tried but unable to achieve http://jsfiddle.net/KWPsv/82/

My Code :

            success: function (data1) {
                debugger;
                var Series = JSON.parse(data1.d.ChartSeries);
                var Categories = JSON.parse(data1.d.Categories);
                var mYtitle = data1.d.TitleName;

       Highcharts.setOptions ({
        colors:[
            '#5a9bd4',
            '#faa75b',
            '#7ac36a',
            '#9e67ab',
            '#f15a60',
            '#ce7058',
            '#d77fb4'
        ]
    });

    var chart = new Highcharts.Chart({
    chart: {
        renderTo:'containerHR',
        type:'column'
    },
    title:{
        text:'Chart Title'
    },
    credits:{enabled:false},
    legend:{
    },
    tooltip:{
        shared:true        
    },
    plotOptions: {
        series: {
            shadow:false,
            borderWidth:0,
            pointPadding:0
        }
    },
    xAxis:{
        categories:Categories[0].categories,
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickLength:3,
        title:{
            text:'X Axis Title',
            style:{
                color:'#333'
            }
        },
        labels: {
        useHTML: true,

    }
    },
    yAxis:{
        lineColor:'#999',
        lineWidth:1,
        tickColor:'#666',
        tickWidth:1,
        tickLength:3,
        gridLineColor:'#ddd',
        title:{
            text:'Y Axis Title',
            rotation:0,
            margin:50,
            style:{
                color:'#333'
            }
        }
    },
    tooltip: {
        useHTML: true,
        shared: true,
        headerFormat: '<b>{series.name}</b><br/>',

    },

    legend: {
        useHTML: true

    },


    series: Series


});

Answer 1

You should be able to use tooltip formatter and inside this formatter return string with all of the values you would like to display in your chart: http://api.highcharts.com/highcharts/tooltip.formatter

  tooltip: {
    shared: true,
    formatter: function() {
      var s = [],
        xAxis = this.points[0].series.xAxis,
        categoryIndex = xAxis.categories.indexOf(this.x),
        title = this.x,
        subTitle = xAxis.options.subtitles[categoryIndex];
      s.push(title + '<br>');
      s.push(subTitle + '<br>');
      $.each(this.points, function(i, point) {
        s.push('<span style="color:#D31B22;font-weight:bold;">' + point.series.name + ' : ' +
          point.y + '<span>');
      });

      return s.join(' and ');
    },
  },

Live example showing chart with tooltip.formatter: http://jsfiddle.net/KWPsv/86/