CODEWITHSUNDEEP
chart.js
Deamon
Deamon

Reputation: 109

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

The tooltip is showing details of only on data point instead of showing all values which are under the label. I want to show all details in the toolbar, let's say when user hover on the point which has label 1 then it's should show following in the tooltip. here is the jsbin.

1

Prime and Fibonacci: 2

My Second dataset: 2

<!doctype html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Line Chart Test</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.0.2/Chart.min.js"></script>
  <script language="JavaScript"><!--
  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
                }
            });
  }
  --></script>
</head>
<body onload="displayLineChart();">
  <div class="box">
    <canvas id="lineChart" height="450" width="800"></canvas>
  </div>
</body>
</html>

Upvotes: 0

Views: 736

Answers (1)

user7364438
user7364438

Reputation:

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

Upvotes: 1

Related Questions