Chartjs-Chart.js 2.0 – Tooltip is showing incomplete data on hover

by

1👍

✅

You can use a tooltip call back function, read thread here. I have updated your function below and you are ready to go. Good luck!

function displayLineChart() {
    var data = {
        labels: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        datasets: [
            {
                label: "Prime and Fibonacci",
                fillColor: "rgba(220,220,220,0.2)",
                strokeColor: "rgba(220,220,220,1)",
                pointColor: "rgba(220,220,220,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(220,220,220,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 19, 23, 29]
            },
            {
                label: "My Second dataset",
                fillColor: "rgba(151,187,205,0.2)",
                strokeColor: "red",
                pointColor: "rgba(151,187,205,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data: [2, 3, 5, 7, 11, 13, 17, 13, 21, 34]
            }
        ]
    };
    var holder = document.getElementById('lineChart');
    var options = {};
    new Chart(holder, {
        type: 'line',
        data: data,
        options: {
            responsive: true,
            tooltips: {
                callbacks: {
                    label: function(tooltipItem, data) {
                        console.log(tooltipItem);
                        console.log( data.datasets[0])
                        var value = data.datasets[0].data[tooltipItem.index];
                        var label = data.labels[tooltipItem.index];
                        var datah = [];
                        datah.push(data.datasets[0].label + ' ' + value);
                        datah.push(data.datasets[1].label + ' ' + value);
                        return datah;
                    }
                }
            }
        }
    });
}

Leave a comment