[Chartjs]-Display character after y-axis data value in onhover pop up Chart.js

by

1👍

✅

You can define tooltips.callbacks.label function inside the chart options as follows:

tooltips: {
  callbacks: {
    label: (tooltipItem, data) => data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel + '%'
  }
},

Please take a look at your amended code and see how it works.

let chart = new Chart('myChart', {
  type: 'line',
  data: {
    labels: ['A', 'B', 'C', 'D', 'E', ],
    datasets: [{
      label: 'Casos confirmados',
      backgroundColor: 'rgb(224, 224, 224)',
      borderColor: 'rgb(0, 0, 0)',
      data: [5, 6, 4, 3, 6]
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        label: (tooltipItem, data) => data.datasets[tooltipItem.datasetIndex].label + ': ' + tooltipItem.yLabel + '%'
      }
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true,
          callback: value => value + '%'
        },
        scaleLabel: {
          display: true,
          labelString: '%'
        }
      }]
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment