chart js v3 how to format tooltip

Question

I have the following snippet :

  
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 > 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)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<div class="chart-container chart">
    <canvas style="padding: 25px;" id="chart_id"></canvas>
</div>

Expected output:

How can I add cm in the tooltip ?

I tried with :

callbacks: {
    afterLabel: function(tooltipItem, data) {
        return dataset.data[tooltipItem.index] + 'cm';
    }
}

But there is no error and no result.

Answer 1

you can do something like that

plugins: {
    tooltip: {
        callbacks: {
            label:(value) => `${value?.parsed?.y || 0} days`
        },
    },
}

Answer 2

Changing the label behaviour is part of the configuration.

You can use the following option plugin to alter the tooltip text in Chart.js v3:

options: {
    plugins: {
        tooltip: {
            callbacks: {
                label: function(context) {
                    return context.parsed.y + ' cm';
                }
            }
        }
    }
}

---

For more information about the label callback, please check there documentation.

---

Fixed snippet:

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 > 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
  };


  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
                },
                tooltip: {
                  callbacks: {
                    label: function(context) {
                        return context.parsed.y + ' cm';
                    }
                  }
                }       
            },
            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)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.4.0/chart.min.js"></script>
<div class="chart-container chart">
    <canvas style="padding: 25px;" id="chart_id"></canvas>
</div>