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

Question

I have this line of code using a chart.js in Laravel App

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>

var ctx = document.getElementById("array_crawl_source_gap").getContext('2d');
var myChart = new Chart(ctx, {
type: 'horizontalBar',
data: {
    labels: ["Google Analytics", "Google Analytics", "Web", "Web"],
    datasets: [{

        data: [ {{ $array_crawl_source_gap[0] }}, {{ $array_crawl_source_gap[1] }}, 
        {{ $array_crawl_source_gap[2] }}, {{ $array_crawl_source_gap[3] }} ],
        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
            },
    scales: {
        yAxes: [{
            ticks: {
                beginAtZero:true,
            }
        }],
        xAxes: [{
            ticks: {
                beginAtZero:true,
                stepSize: 100
            }
        }],
    }
}
});

Here is the output of my code.

Expected output:

Base on my codes how can I able to make only one Google Analytics and Web in labels? And is it possible to change the labels when you hover the data as the picture below? Any idea/thoughts how can I fix this. Thank you in advance.

score 3 · Accepted Answer · answered Oct 10 '18 at 16:05

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
                }
            }],
        },
    }
});

score 1 · Answer 2 · answered Oct 09 '18 at 22:12

1

Manual on tooltip: https://www.chartjs.org/docs/latest/configuration/tooltip.html

HTML in tooltip: Chart JS Show HTML in Tooltip

answered Oct 09 '18 at 22:12

Yevgen

1,239
3
15
30

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

2 Answers2