title: ChartJS: Stacked bar chart plus Line. Get total and percentage of stacked bar only
body: <p>I have below ChartJS chart represents Business Targets vs Achievement with split of Online + Store revenues. </p>
  
  <p><a href="https://i.stack.imgur.com/5JKzE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5JKzE.png" alt="stacked bar chart with line"></a></p>
  
  <p>Below is the Chart Code:</p>
  
  <pre><code>  var data = [{
          label: 'Target',
          data: [21421, 22145, 15014, 15441],
          type: 'line',
          borderColor: '#004368',
          datalabels: {
              display: false
          }
      }, {
          label: 'Online',
          backgroundColor: 'green',
          data: [6310, 5742, 4044, 5564]
      }, {
          label: 'Store',
          backgroundColor: 'red',
          data: [11542, 12400, 12510, 11450]
      }];
  </code></pre>
  
  <p>Using <code>chartjs-plugin-datalabels</code> plugin I am showing percentage value of the each stacked bar with below code (author: <a href="https://stackoverflow.com/a/52044118/3725816">https://stackoverflow.com/a/52044118/3725816</a>):</p>
  
  <pre><code>datalabels: {
              formatter: function (value, ctx) {
  let sum = 0;
  let dataArr = ctx.chart.data.datasets[0].data;
  dataArr.map(data =&gt; {
      sum += data;
  });
  let percentage = (value * 100 / sum).toFixed(0) + "%";
  return percentage;
  }
          }
  </code></pre>
  
  <p><strong>I want to show the percentage of sum of Online + Store achieved in each bar, ignoring Target value.</strong> What is wrong with this code is, it is showing the percentage of sum of all three datasets (target, achieved-store, achieved-online.)</p>
  
  <p>Also, I am showing all the Labels in the Tooltips with the below code:</p>
  
  <pre><code> tooltips: {
          mode: 'label',
          callbacks: {
              label: function (tooltipItem, data) { 
  var type = data.datasets[tooltipItem.datasetIndex].label;
  var value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
  var total = 0;
  for (var i = 0; i &lt; data.datasets.length; i++)
      total += data.datasets[i].data[tooltipItem.index];
  if (tooltipItem.datasetIndex !== data.datasets.length - 1) {
      return type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,');
  } else {
      return [type + " : " + value.toFixed(0).replace(/(\d)(?=(\d{3})+\.)/g, '1,'), "Achieved: " + total];
  }
  }
          }
      }
  </code></pre>
  
  <p>In the above tooltip, how can I <strong>show the Achieved Revenue value</strong> (Sum Total of Bars only: Online + Store).</p>
  
  <p>Here is the JSFiddle (<a href="https://jsfiddle.net/kingBethal/2apo3e6x/9/" rel="nofollow noreferrer">https://jsfiddle.net/kingBethal/2apo3e6x/9/</a>)</p>