title: Remove the label and show only value in tooltips of a bar chart
body: <p>I am using <a href="http://www.chartjs.org/docs/" rel="nofollow noreferrer"><strong>ChartJS</strong></a> library to create charts. In the tooltip, I am showing the data value from the dataset I created. It works in case if the chart type is <em>doughnut</em>. Otherwise it doesn't work in case or <em>bar</em> or <em>horizontalbar</em> charts.</p>
  <p>Whatever I do it shows the data with the labels.</p>
  <p><strong><a href="https://jsfiddle.net/suhaibjanjua/1ah2w2ug/" rel="nofollow noreferrer">Working JSFiddle of Doughnut Chart with data in tooltip</a></strong>.</p>
  <p><a href="https://i.stack.imgur.com/nJahM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nJahM.png" alt="Doughnut Chart" /></a></p>
  <hr />
  <p><strong><a href="https://jsfiddle.net/suhaibjanjua/or6b8j2m/133/" rel="nofollow noreferrer">Working JSFiddle of Bar Chart with label + data in tooltip</a></strong>.</p>
  <p><a href="https://i.stack.imgur.com/IAXVb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IAXVb.png" alt="Bar Chart" /></a></p>
  <p>All I want to do is to remove the label shown in the tooltips of the bar chart.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var ctx = document.getElementById("myChart");
  
  var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
      labels: [
        "Men",
        "Women",
        "Unknown"
      ],
      datasets: [{
          label: 'Men',
          data: [60, 40, 20],
          backgroundColor: [
            'rgba(158, 216, 202, 0.75)',
            'rgba(255, 150, 162, 0.75)',
            'rgba(160, 160, 160, 0.75)'
          ]
        },
        {
          label: 'Women',
          data: [40, 70, 10],
          backgroundColor: [
            'rgba(158, 216, 202, 0.5)',
            'rgba(255, 150, 162, 0.5)',
            'rgba(160, 160, 160, 0.5)'
          ]
        },
        {
          label: 'Unknown',
          data: [33, 33, 34],
          backgroundColor: [
            'rgba(158, 216, 202, 0.25)',
            'rgba(255, 150, 162, 0.25)',
            'rgba(160, 160, 160, 0.25)'
          ]
        }
      ]
    },
    options: {
      tooltips: {
        callbacks: {
          label: function(tooltipItem, data) {
            var datasetLabel = '';
            var label = data.labels[tooltipItem.index];
            return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          }
        }
      }
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.3.0/Chart.bundle.min.js"&gt;&lt;/script&gt;
  
  &lt;canvas id="myChart" width="400" height="200"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>