[Chartjs]-How can I change the label name when you hover your data in Chart.js?

3👍

Custom tooltip position:

Chart.Tooltip.positioners.custom = function(elements, position) {
    if (!elements.length)
      return false;

    var em = elements[0]._model;

    return {
      x: em.x-((em.x-em.base)/2),
      y: em.y+em.height/4
    }
}

Added tooltipText for custom tooltip titles, also callbacks to display those titles and labels. Y-axis labels have offset.

var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        labels: ["Google Analytics", "", "Web", ""],
        tooltipText: ["Wild Quess", "Very Analytical", "Fine Prediction", "Bob's opinion"],
        datasets: [{
            data: [  250 , 260 , 270 , 280  ],
            backgroundColor: [
                'rgb(182, 197, 211)',
                'rgba(113, 152, 214, 1.0)',
                'rgb(182, 197, 211)',
                'rgba(113, 152, 214, 1.0)',
            ]

        }]
    },
    options: {
        responsive: false,
        legend: { display: false },
        tooltips: {
            enabled: true,
            displayColors: false,
            yPadding: 10,
            xPadding: 30,
            caretSize: 10,
            backgroundColor: 'rgba(240, 240, 240, 1)',
            titleFontColor: 'rgb(50, 100, 50)',
            bodyFontColor: 'rgb(50, 50, 50)',
            borderColor: 'rgba(0,0,0,1)',
            borderWidth: 1,
            cornerRadius: 0,
            yAlign: 'bottom',
            xAlign: 'center',
            callbacks: {
                title: function(tooltipItem, data) {
                    var title = data.tooltipText[tooltipItem[0].index];
                    return title;
                },
                label: function(tooltipItem, data) {
                    return tooltipItem.xLabel+' pages';
                }
            },
            position: 'custom',
        },
        scales: {
            yAxes: [{
                ticks: {
                    type: 'category',
                    labelOffset: 35,
                },
            }],
            xAxes: [{
                ticks: {
                    beginAtZero:true,
                    stepSize: 100
                }
            }],
        },
    }
});

1👍

Leave a comment