[Chartjs]-Chart.JS – Tooltips – Issue: 3 data points, all three individual tooltips showing for each data point

by

1👍

✅

You have info as array of array .Instead simply have [ ] single array and then get info array for individual tootltip like this data.datasets[tooltipItems[0].datasetIndex].info[tooltipItems[0].index].

Demo code :

//bar chart
var bar = document.getElementById('bar');
var barConfig = new Chart(bar, {
  type: 'bar',

  data: {
    labels: ['Implementation not part of objectives', 'Pre-Implementation', 'Implementation/Sustainment'],
    datasets: [{
      label: '# of data',
      data: [30, 25, 20],
      info: [
        'No Implemention Definition', 'Pre-Implementation Definition', 'Implementation Definition'

      ],//simply have array

      backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
      borderWidth: 1
    }]
  },
  options: {
    tooltips: {
      callbacks: {
        title: (tooltipItems, data) => data.labels[tooltipItems[0].index],
        label: (tooltipItems, data) => data.datasets[tooltipItems.datasetIndex].label + ' ' + data.datasets[tooltipItems.datasetIndex].data[tooltipItems.index],
        footer: (tooltipItems, data) => 'Description:' + (data.datasets[tooltipItems[0].datasetIndex].info[tooltipItems[0].index])

      }

    },
    legend: {
      display: false,
    },
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero: true
        }
      }]
    },
    responsive: true, // Instruct chart js to respond nicely.
    maintainAspectRatio: false, // Add to prevent default behaviour of full-width/height
  }
})
<script src="https://code.jquery.com/jquery-3.4.1.slim.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>

<body>
  <div class="container">
    <main>
      <div class="dashboard-container">

        <div class="card-3">
          <h4 class="chart-lbl">
            <h4>Implementation stage at end of projects</h4>
          </h4>
          <div class="divider">
          </div>
          <div class="bar-chart-container">
            <canvas class="bar-chart" id="bar">
                                </canvas>
          </div>
        </div>
      </div>
    </main>
  </div>

Leave a comment