title: How to customize the tooltip of a Chart.js 2.0 Doughnut Chart?
body: <p>I'm trying to show some data using a doughnut chart from Chart.js2.</p>
  <p>My current chart looks like this:<br />
  <a href="https://i.stack.imgur.com/0VHP3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0VHP3.png" alt="current chart" /></a></p>
  <p>My desired output must show another attribute, which is the percentage, and looks like this:<br />
  <a href="https://i.stack.imgur.com/aM5mq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aM5mq.png" alt="desired chart with percentage" /></a></p>
  <p>I've read the documentation, but I can't cope with this because it's very general and I'm new to JavaScript.</p>
  <p>My code for the first chart is the following:</p>
  <pre><code>const renderCashCurrencyPie = (cashAnalysisBalances) =&gt; {
    if (cashAnalysisBalances) {
      const currenciesName = cashAnalysisBalances
      .map(curName =&gt; curName.currency);
  
      const availableCash = cashAnalysisBalances
      .map(avCash =&gt; avCash.availableCash);
  
      let currenciesCounter = 0;
      for (let i = 0; i &lt; currenciesName.length; i += 1) {
        if (currenciesName[i] !== currenciesName[i + 1]) {
          currenciesCounter += 1;
        }
      }
  
      const currenciesData = {
        labels: currenciesName,
        datasets: [{
          data: availableCash,
          backgroundColor: [
            '#129CFF',
            '#0C6DB3',
            '#FF6384',
            '#00FFFF'
          ],
          hoverBackgroundColor: [
            '#FF6384',
            '#36A2EB',
            '#FFCE56',
            '#00FFFF'
          ]
        }]
      };
  </code></pre>