title: Highcharts angular.js custom tooltip
body: <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>