title: chart.js add label into tooltip
body: <p>I am using <a href="http://www.chartjs.org/" rel="nofollow noreferrer">chart.js</a> for line graphs to show trends over time, but it's not clear when hovering over a data point what it's for.</p>
  <p>Is there a way to add the label from the data into the tooltip?</p>
  <p>I am currently doing this to add a &quot;%&quot; after the tooltip data, as I'm dealing with percentages like so:</p>
  <pre><code>tooltips: {
    callbacks: {
      label: function(tooltipItem, data) {
        var value = data.datasets[0].data[tooltipItem.index];
        return value + '%';
      }
    },
  },
  </code></pre>
  <p>So I want it so when they hover over the data point on the lines, it will say &quot;legend - data%&quot;.</p>
  <p>Here's a full example of the code with the data:</p>
  <pre><code>var ctx = document.getElementById('myLineChart');
  var myChart = new Chart.Line(ctx, {
    type: 'bar',
    data: {
      labels: ['Jul-2016', 'Sep-2016', 'Oct-2016', 'Dec-2016', 'Jan-2017'],
      datasets: [{
        label: 'Ubuntu-based',
        fill: false,
        data: [
          [&quot;Ubuntu-based&quot;, &quot;51.37&quot;],
          [&quot;Ubuntu-based&quot;, &quot;51.04&quot;],
          [&quot;Ubuntu-based&quot;, &quot;50.64&quot;],
          [&quot;Ubuntu-based&quot;, &quot;50.29&quot;],
          [&quot;Ubuntu-based&quot;, &quot;49.6&quot;]
        ],
        borderColor: '#a6cee3',
        borderWidth: 1
      }, {
        label: 'Arch-based',
        fill: false,
        data: [
          [&quot;Arch-based&quot;, &quot;28.52&quot;],
          [&quot;Arch-based&quot;, &quot;28.53&quot;],
          [&quot;Arch-based&quot;, &quot;28.75&quot;],
          [&quot;Arch-based&quot;, &quot;29.02&quot;],
          [&quot;Arch-based&quot;, &quot;29.16&quot;]
        ],
        borderColor: '#1f78b4',
        borderWidth: 1
      }, {
        label: 'Debian',
        fill: false,
        data: [
          [&quot;Debian&quot;, &quot;6.73&quot;],
          [&quot;Debian&quot;, &quot;6.74&quot;],
          [&quot;Debian&quot;, &quot;6.75&quot;],
          [&quot;Debian&quot;, &quot;6.82&quot;],
          [&quot;Debian&quot;, &quot;6.79&quot;]
        ],
        borderColor: '#b2df8a',
        borderWidth: 1
      }, {
        label: 'Fedora',
        fill: false,
        data: [
          [&quot;Fedora&quot;, &quot;3.92&quot;],
          [&quot;Fedora&quot;, &quot;4.09&quot;],
          [&quot;Fedora&quot;, &quot;4.07&quot;],
          [&quot;Fedora&quot;, &quot;4.14&quot;],
          [&quot;Fedora&quot;, &quot;4.53&quot;]
        ],
        borderColor: '#33a02c',
        borderWidth: 1
      }, {
        label: 'openSUSE',
        fill: false,
        data: [
          [&quot;openSUSE&quot;, &quot;3.15&quot;],
          [&quot;openSUSE&quot;, &quot;3.05&quot;],
          [&quot;openSUSE&quot;, &quot;2.98&quot;],
          [&quot;openSUSE&quot;, &quot;3.03&quot;],
          [&quot;openSUSE&quot;, &quot;3.02&quot;]
        ],
        borderColor: '#fb9a99',
        borderWidth: 1
      }, {
        label: 'Gentoo',
        fill: false,
        data: [
          [&quot;Gentoo&quot;, &quot;3.08&quot;],
          [&quot;Gentoo&quot;, &quot;2.98&quot;],
          [&quot;Gentoo&quot;, &quot;3.04&quot;],
          [&quot;Gentoo&quot;, &quot;3.03&quot;],
          [&quot;Gentoo&quot;, &quot;2.91&quot;]
        ],
        borderColor: '#e31a1c',
        borderWidth: 1
      }, {
        label: 'SteamOS',
        fill: false,
        data: [
          [&quot;SteamOS&quot;, &quot;1.26&quot;],
          [&quot;SteamOS&quot;, &quot;1.62&quot;],
          [&quot;SteamOS&quot;, &quot;1.58&quot;],
          [&quot;SteamOS&quot;, &quot;1.57&quot;],
          [&quot;SteamOS&quot;, &quot;1.67&quot;]
        ],
        borderColor: '#fdbf6f',
        borderWidth: 1
      }, {
        label: 'Slackware',
        fill: false,
        data: [
          [&quot;Slackware&quot;, &quot;0.63&quot;],
          [&quot;Slackware&quot;, &quot;0.58&quot;],
          [&quot;Slackware&quot;, &quot;0.52&quot;],
          [&quot;Slackware&quot;, &quot;0.49&quot;],
          [&quot;Slackware&quot;, &quot;0.61&quot;]
        ],
        borderColor: '#ff7f00',
        borderWidth: 1
      }, {
        label: 'Mageia',
        fill: false,
        data: [
          [&quot;Mageia&quot;, &quot;0.63&quot;],
          [&quot;Mageia&quot;, &quot;0.65&quot;],
          [&quot;Mageia&quot;, &quot;0.61&quot;],
          [&quot;Mageia&quot;, &quot;0.58&quot;],
          [&quot;Mageia&quot;, &quot;0.59&quot;]
        ],
        borderColor: '#cab2d6',
        borderWidth: 1
      }, {
        label: 'Solus',
        fill: false,
        data: [
          [&quot;Solus&quot;, &quot;0.42&quot;],
          [&quot;Solus&quot;, &quot;0.45&quot;],
          [&quot;Solus&quot;, &quot;0.61&quot;],
          [&quot;Solus&quot;, &quot;0.64&quot;],
          [&quot;Solus&quot;, &quot;0.92&quot;]
        ],
        borderColor: '#6a3d9a',
        borderWidth: 1
      }, {
        label: 'Sabayon',
        fill: false,
        data: [
          [&quot;Sabayon&quot;, &quot;0.21&quot;],
          [&quot;Sabayon&quot;, &quot;0.19&quot;],
          [&quot;Sabayon&quot;, &quot;0.24&quot;],
          [&quot;Sabayon&quot;, &quot;0.23&quot;],
          [&quot;Sabayon&quot;, &quot;0.22&quot;]
        ],
        borderColor: '',
        borderWidth: 1
      }, {
        label: 'Chakra',
        fill: false,
        data: [
          [&quot;Chakra&quot;, &quot;0.07&quot;],
          [&quot;Chakra&quot;, &quot;0.06&quot;],
          [&quot;Chakra&quot;, &quot;0.06&quot;],
          [&quot;Chakra&quot;, &quot;0.06&quot;],
          [&quot;Chakra&quot;, &quot;0.05&quot;]
        ],
        borderColor: '',
        borderWidth: 1
      }, {
        label: 'Netrunner',
        fill: false,
        data: [
          [&quot;Netrunner&quot;, &quot;0.06&quot;],
          [&quot;Netrunner&quot;, &quot;0.06&quot;],
          [&quot;Netrunner&quot;, &quot;0.05&quot;]
        ],
        borderColor: '',
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          },
          scaleLabel: {
            display: true,
            labelString: 'Percentage of users'
          }
        }]
      },
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var value = data.datasets[0].data[tooltipItem.index];
            var label = data.labels[tooltipItem.index];
            return label + value + '%';
          }
        },
      },
    }
  });
  </code></pre>
  <p>So when you hover over a data point in the &quot;Ubuntu-based&quot; data column, the tooltip would have &quot;Ubuntu-based&quot; in it.</p>
  <p>EDIT:</p>
  <p>The answer was to change the callback to this</p>
  <pre><code>label: function(tooltipItem, data) {
        var value = data.datasets[tooltipItem.datasetIndex].data[0];
        var label = data.datasets[tooltipItem.datasetIndex].label;
        return label + ' ' + value + '%';
  }
  </code></pre>