Chartjs-Chart js double tooltip on hover

by

0👍

Dont hardcode your response for the label and it runs for every label, you will need to use the title callback and just use the data passed in the arg for the value of the item:

var labels = ["A", "B", "C", "D"];
var d1 = [1, 2, 3, 10];
var d2 = [3, 4, 3, 7];
var dd1 = 'y';
var dd2 = 'y';

var ctx = $("#lchart");
var lchart = new Chart(ctx, {
   type: "line",
   data: {
      labels: labels,
      datasets: [{
            cubicInterpolationMode: "monotone",
            label: "s1",
            data: d1,
            pointHoverRadius: 6,
            pointRadius: 6,
            pointBorderWidth: 3
         },
         {
            cubicInterpolationMode: "monotone",
            label: "s2",
            data: d2,
            pointHoverRadius: 6,
            pointRadius: 6,
            pointBorderWidth: 3,
         }

      ]
   },
   options: {
      legend: {
         display: false
      },
      tooltips: {
         yPadding: 15,
         xPadding: 15,
         mode: "index",
         backgroundColor: "yellow",
         titleFontSize: 14,
         titleFontColor: "#999",
         bodyFontColor: '#000',
         bodyFontSize: 12,
         displayColors: false,
         callbacks: {
            beforeBody: () => ('Title:'),
            label: function(ttItem, data) {
               return ttItem.yLabel;
            }
         }
      }
   }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<body>
    <canvas id="lchart"></canvas>
</body>

Leave a comment