Highcharts angular.js custom tooltip
<p>I am working on following example <a href="https://jsfiddle.net/neelkamal0666/6737c2q5/" rel="nofollow noreferrer">https://jsfiddle.net/neelkamal0666/6737c2q5/</a></p>

<pre><code>Highcharts.chart('container', {
        chart: {
          type: 'column'
        },
        colors: ["rgb(241,198,64)", "#0091ea"],
        title: {
          text: '&amp;nbsp;',
          useHTML : true
        },
        xAxis: {
          categories: ['Sowing', 'Activity', 'Application', 'Harvest']
        },
        yAxis: {
          min: 0,
          title :'',
          stackLabels: {
            enabled: false,
            style: {
              fontWeight: 'bold',
              color: (Highcharts.theme &amp;&amp; Highcharts.theme.textColor) || 'gray'
            }
          }
        },
        legend: {
          align: 'right',
          x: -30,
          verticalAlign: 'top',
          y: 25,
          floating: true,
          backgroundColor: 'white',
          borderColor: '#CCC',
          borderWidth: 1,
          shadow: false
        },
        credits: {
          enabled: false
        },
        tooltip: {
          shared: false,
          backgroundColor: 'black',
          borderColor: 'black',
          borderRadius: 10,
          color: 'white',
          useHTML :true,
          borderWidth: 3,
          headerFormat: '&lt;b style="color: #fff;"&gt;{point.x}&lt;/b&gt;&lt;br/&gt;',
          pointFormat: '&lt;b style="color: #fff;"&gt;{series.name}: {point.y}&lt;/b&gt;&lt;br/&gt;&lt;b style="color: #fff;"&gt;Total(%): {point.stackTotal}&lt;/b&gt;&lt;br /&gt;',
          /*formatter: function () {
            var s = '&lt;b&gt;' + this.x + '&lt;/b&gt;';
            angular.forEach(this.points, function () {
              s += '&lt;br/&gt;' + this.series.name + ': ' +
                this.y + 'm';
            });

            return s;
          } */
        },
        plotOptions: {
          column: {
            stacking: 'normal',
            dataLabels: {
              enabled: false,
              color:  'white',
              style: {
                textShadow: ''
              }
            }
          },
          series: {
            pointWidth: 50, //width of the column bars irrespective of the chart size
            additional : ["Sowing Area", "Activity", "Application", "Harvest"]
          }
        },
        series: [{
          name: 'Pending(%)',
          data: [60, 40, 20, 80],

        }, {
          name: 'Completed(%)',
          data: [40, 60, 80, 20],

        }]

      });
</code></pre>

<p><a href="https://i.stack.imgur.com/UZfBX.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/UZfBX.png" alt="graph example"></a></p>

<p>On tooltips I want to display different values
e.g  if user clicks on sowing it will show </p>

<pre><code>Pending : 60
Total : 100
Sowing Area : 4500 H
Plots Audited : 1200 H
</code></pre>

<p>And when user clicks on activities, it will show</p>

<pre><code>  Pending : 40,
  Completed : 60,
  Total : 100,
  Total Activities : 200
  Closed Activities : 125
</code></pre>

<p>When user clicks on Application, it will show</p>

<pre><code>Pending :20,
Completed :80
Total :100,
Per acre usage : 200
</code></pre>

<p>And When user clicks on Harvest, it will show</p>

<pre><code>Pending :80,
Completed :20
Total :100,
Volume Forcast : 100MT
</code></pre>

<p>I read the documentation of Highchart and went through lot of examples but still unable to figure out how can I achieve this.</p>

<p>Can someone help?</p>