title: Displaying dataset labels in Chart.js line graph
body: <p>I've managed to create a Chart.js line graph that contains multiple datasets.  However, how can I modify the tooltip such that when I hover over a point, the label of the datasets is displayed as well as the £ symbol?</p>
  
  <p>For example, from my screenshot, I'd like to display:</p>
  
  <pre><code>31/10/2015
  (label) - £100.00
  (label) - £240.00
  (label) - £150.00
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Gdg6Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gdg6Z.png" alt="enter image description here"></a></p>
  
  <p>javascript code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  gon.balances.reverse();
  var balancesSortByAccId = gon.balancesSortByAccId;
  
  var data = {
      labels: [],
      datasets: []
  };
  
  //loop through all accounts to generate datasets
  for(var account in gon.balancesSortByAccId){
    var balances = [];
    var dates = [];
  
    var accountData = gon.balancesSortByAccId[account];
  
    for (var i in accountData) {
      balances.push(parseFloat(accountData[i].balance).toFixed(2)); 
      dates.push(convertDate(accountData[i].date));
  
      for (var date in dates)
        if (data.labels.indexOf(dates[date]) &lt;= -1)
          data.labels.push(dates[date]);
    }
  
    var colour = getRandomColor();
  
    var chartjs_balances =           {
                label: account,
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: colour,
                pointColor: colour,
                pointStrokeColor: colour,
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: balances
            };
  
  
    data.datasets.push(chartjs_balances);
  }
  
  var options = {
    responsive: true,
  };
  
  //draw graph
  var ctx = document.getElementById("history_canvas").getContext("2d");
  var myLineChart = new Chart(ctx).Line(data, options);
  
  //convert date to dd/mm/yyyy format
  function convertDate(inputFormat) {
    function pad(s) { return (s &lt; 10) ? '0' + s : s; }
    var d = new Date(inputFormat);
    return [pad(d.getDate()), pad(d.getMonth()+1), d.getFullYear()].join('/');
  }
  
  //return random color for each dataset
  function getRandomColor() {
      var letters = '0123456789ABCDEF'.split('');
      var color = '#';
      for (var i = 0; i &lt; 6; i++ ) {
          color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
  }
  </code></pre>
  
  <p></p>
  
  <p>UPDATE:</p>
  
  <p>I've managed to display the £ symbol with the following update:</p>
  
  <pre><code>var options = {
    responsive: true,
    multiTooltipTemplate: "&lt;%%=label%&gt;: £&lt;%%= value %&gt;"
  };
  </code></pre>
  
  <p>However, the output of that is the following and not completely how I want it since it displays the date instead of the account label:</p>
  
  <pre><code>31/10/2015
  31/10/2015 - £100.00
  31/10/2015 - £240.00
  31/10/2015 - £150.00
  </code></pre>