Multi label tool-tip in Chart.js

by

4đź‘Ť

âś…

This can be set with the mode option in the tooltips section.
Setting the mode to index is likely the mode you are looking for.

  new Chart(document.getElementById('mainChart'), {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        { data: data, label: "Expenses", fill: false }
      ]
    },
    options: {
      animation: { duration: 0 },
      hover: { animationDuration: 0 },
      responsiveAnimationDuration: 0,
      tooltips: { mode: 'index' }             
    }
  });

Below a sample with mode: 'index':

new Chart(document.getElementById('chartJSContainer'), {
      type: 'line',
      data: {
        labels: ["1", "2", "3", "4", "5", "6"],
        datasets: [{
	      		data: [7, 11, 5, 8, 3, 7],
            label: "Income",
            fill: false,
            backgroundColor: 'rgb(54, 162, 235)',
            borderColor: 'rgb(54, 162, 235)',
          }, {
	      		data: [12, 19, 3, 5, 2, 3],
            label: "Expenses",
            fill: false,
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
          }
          ]
        },
        options: {
          animation: {
            duration: 0
          },
          hover: {
            animationDuration: 0
          },
          responsiveAnimationDuration: 0,
          tooltips: {
           mode: 'index'
          }
        }
      });
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Leave a comment