title: chart js v3 how to format tooltip
body: <p>I have the following snippet :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  
  function updateGraph(type, chart){
      $.ajax({
          type: 'GET',
          url: "https://api.npoint.io/2700899037d8e83d5318",
          dataType: 'json',
          context: document.body,
          global: false,
          async: true,
          success: function(response) {
              var count_result = response.labels;
              if(count_result.length &gt; 1){
               chart.data.labels = response.labels;
               chart.data.datasets[0].data = response.data;
               chart.update();               
              }
          }
      });
  }
  
   var chartTooltip = {
        borderWidth: 0.5,
        bodySpacing: 10,
        xPadding: 15,
        yPadding: 15,
        cornerRadius: 0.15,
        displayColors: false,
        callbacks: {
          afterLabel: function(tooltipItem, data) {
            return dataset.data[tooltipItem.index] + 'cm';
          }
        }
    };
  
  
    if (document.getElementById("chart_id")) {
      var chart_id = document
          .getElementById("chart_id")
          .getContext("2d");
      var chart = new Chart(chart_id, {
          type: "line",
          options: {
              plugins: {
                  legend: {
                      display: false
                  },
                  datalabels: {
                      display: false
                  }
              },
              responsive: true,
              maintainAspectRatio: false,
              scales: {
                  yAxes: [{
                      gridLines: {
                          display: true,
                          lineWidth: 1,
                          color: "rgba(0,0,0,0.1)",
                          drawBorder: false
                      },
                      ticks: {
                          beginAtZero: true,
                          stepSize: 5,
                          min: 50,
                          max: 70,
                          padding: 0
                      }
                  }],
                  xAxes: [{
                      type: 'time',
                      distribution: 'linear',
                      gridLines: {
                          display: false
                      }
                  }]
              },
              legend: {
                  display: false
              },
              tooltips: chartTooltip
          },
          data: {
              datasets: [{           
                  pointRadius: 4,
                  pointBorderWidth: 2,
                  pointHoverRadius: 5,
                  fill: true,
                  borderWidth: 2,
  
              }]
          }
      });
  }
  
  
  updateGraph('1', chart)</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"&gt;&lt;/script&gt;
  &lt;div class="chart-container chart"&gt;
      &lt;canvas style="padding: 25px;" id="chart_id"&gt;&lt;/canvas&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Expected output:</p>
  <p><a href="https://i.stack.imgur.com/7BGiD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7BGiD.png" alt="enter image description here" /></a></p>
  <p>How can I add <strong>cm</strong> in the tooltip ?</p>
  <p>I tried with :</p>
  <pre><code>callbacks: {
      afterLabel: function(tooltipItem, data) {
          return dataset.data[tooltipItem.index] + 'cm';
      }
  }
  </code></pre>
  <p>But there is no error and no result.</p>