title: How to loop tooptip additional data in chart.js
body: <p>Here i have a graph which contains x-axis data and y-axis data which are com from db table. and now i am facing a problem is that, wherever i trying to append this 3rd data in <code>afterbody</code> callback function in tooltip. it will shows entire data in each and every tool tip.</p>
  
  <p>But i want to append these data in each tool tip respectively.</p>
  
  <p><strong>like:</strong></p>
  
  <p>on 1st tool tip <strong>margin 12%</strong></p>
  
  <p>on 2nd tool tip <strong>margin 5%</strong></p>
  
  <p>on 3rd tool tip <strong>margin 25%</strong> and so on.</p>
  
  <p><strong>Here is a screen shot from current graph with tool tip data</strong></p>
  
  <p><a href="https://i.stack.imgur.com/OsvwR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OsvwR.png" alt="enter image description here"></a></p>
  
  <p><strong>And here is my code</strong></p>
  
  <pre><code>    $(document).ready(function(){
      $.ajax({
          url: "&lt;?php base_url();?&gt;/charts/getsome",
          method: "GET",
          success: function(data) {
              console.log(data);
              var data = JSON.parse(data);
              var month = [];
              var customers = [];
              var margin = [];
  
              for(var i in data) {
                  month.push("Customer in " + data[i].apply_month);
                  customers.push(data[i].no_customers);
                  margin.push(data[i].margin);
              }
              var chartdata = {
                  labels: month,              
                  datasets : [
                      {
                          label: 'monthly customers for Year 2016',
                          backgroundColor: 'rgba(200, 200, 200, 0.75)',
                          borderColor: 'rgba(200, 200, 200, 0.75)',
                          hoverBackgroundColor: 'rgba(200, 200, 200, 1)',
                          hoverBorderColor: 'rgba(200, 200, 200, 1)',
                          data: customers,
                          fill: false
                      }
  
                  ]
  
              };
  
              var frame = $("#mycanvas");
  
              var barGraph = new Chart(frame, {
                  type: 'line',               
                  data: chartdata,
                  options: {
                            responsive: true,
                            tooltips: {
                               callbacks: {
                                  afterBody: function(t, d) {
                                     return 'margin  '+margin;
                                  }
                               }
                            }
                         }
              });
          },
          error: function(data) {
              console.log(data);
          }
      });
  });
  </code></pre>
  
  <p>Now i just want to showing these margin percentage data separately for each tool tip. Please suggest me, where i am going wrong? Thanks in Advance :)</p>