CODEWITHSUNDEEP
javascripthtmljquerycsschart.js
tenebris silentio
tenebris silentio

Reputation: 519

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

I have a small dashboard I'm making for our group and users want to hover over the bar graph to get the definitions for different stages of implementation. I've got the hovering part to work, but I'm clearing missing something. All three tooltips show for each data point. I have three data points: No implementation, pre-implementation, and implementation/sustainment. Therefore, I have three definitions. However, all three definitions are showing for one data point. Example: hovering over "No implementation" someone sees "No Implementation Definition", "Pre-Implementation Definition', and "Implementation Definition." It should just should just show "No Implementation Definition."

I'm sure it's an easy fix and something I'm just overlooking. Any help is appreciated. Here's the codepen and further down is my code. Codepen: https://codepen.io/tenebris_silentio/pen/GRZPedx

        </head>
        <body>
            <div class="container">
                <main>
                    <div class="dashboard-container">
                        <div class="card-1">
                            <h4 class="chart-lbl">
                            <h4>  Title 1<h4>
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="doughnut-chart-container">
                                <canvas class="doughnut-chart" id="doughnut">
                                </canvas>
                            </div>
                        </div>
                        <div class="card-2">
                            <h4 class="chart-lbl">
                                <h4>Title 2</h4>
                            </h4>
                            <div class="divider">
                            </div>
                            <div class="pie-chart-container">
                                <canvas class="pie-chart" id="pie">
                                </canvas>
                            </div>
                        </div>
                        <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>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js">
            </script>
            <script src="js/generate_chart.js">
            </script>
        </body>
    </html>

    <style>
    :root {
          --grey-d1: #585858;
          --grey-d2: #F4F4F4;
          --grey-d3: #000000;
          --red-1: #F2B8D1;
          --red-2: #F04B92;
          --red-3: #EB1E77;
          --red-4: #AD1257;
          --white: #FFFFFF;
          --blue: #329EF4;
          --grey: #eeeeee;
        }
        html,
        body {
          font-family: sans-serif;
          height: 100%;
          background-color: var(--grey);
        }
        .card-1,
        .card-2,
        .card-3 {
          background-color: white;
          border-radius: 15px;
          box-shadow: 2px 2px 5px 2px #D7D7D7;
        }
        .chart-lbl {
          margin: 5px;
          color: var(--grey-d3);
          opacity: 0.8;
        }
        h4 {
          font-size: 16px;
          font-weight: bold;
        }
        .divider {
          background-color: var(--grey-d2);
          height: 1px;
          margin: auto;
          width: 70%;
        }
        .container {
          margin: 5px auto;
        }
        .dashboard-container {
          display: grid;
          grid-template: 33% / 100%;
          grid-gap: 10px;
        }
        .divider + div {
          padding: 15px;
          height: calc(100% - 41px);
        }

        @media only screen and (min-width: 220px) {
          .card-1,
          .card-2,
          .card-3 {
            border-radius: 8px;
          }
          .card-1 {
            grid-row: 1 / 3;
          }
          .card-2 {
            grid-row: 3 / 5;
          }
          .card-3 {
            grid-row: 5 / 7;
          }
        }

        @media only screen and (min-width: 792px) {
          .dashboard-container {
            grid-template: 19% 19% 19% 10% 10% 10% / repeat(2, 50%);
          }
          .card-1 {
            grid-column: 1 / 2;
            grid-row: 1 / 3;
          }
          .card-2 {
            grid-column: 2 / 3;
            grid-row: 1 / 3;
          }
          .card-3 {
            grid-column: 1 / 3;
            grid-row: 3 / 7;
          }
        }
        @media only screen and (min-width: 1100px) {
          .dashboard-container {
            grid-template: repeat(5, 1fr) / repeat(11, 1fr);
            grid-gap: 8px;
            margin: 0;
            padding: 5px;
          }
          .card-1 {
            grid-column: 1 / 6;
            grid-row: 1 / 3;
          }
          .card-2 {
            grid-column: 1 / 6;
            grid-row: 3 / 5;
          }
          .card-3 {
            grid-column: 6 / 12;
            grid-row: 1 / 5
          }
          .container {
            max-width: 1270px;
          }
        }
        @media screen and (min-width: 1200px) {
          .dashboard-container {
            max-width: 1500px;
          }
        }
</style>
<script>
var doughnut = document.getElementById('doughnut');
   var doughnutConfig = new Chart(doughnut, {
     type: 'horizontalBar',
     data: {
       labels: ['data-1', 'data-2', 'data-3', 'data-4'],
       datasets: [{
         label: '# of data',
         data: [11, 30, 20, 1],
         backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
         borderWidth: 1
       }]
     },
     options: {
       legend: {
         display: false,
       },
       responsive: true, // Instruct chart js to respond nicely.
       maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
     }
   });
   //pie chart
   var pie = document.getElementById('pie');
   var doughnutConfig = new Chart(pie, {
     type: 'horizontalBar',
     data: {
       labels: ['d1', 'd2', 'd3', 'd4', 'd5', 'd6'],
       datasets: [{
         label: '# of data',
         data: [11, 30, 20, 14, 11, 3],
         backgroundColor: ['rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)', 'rgba(0, 0, 89)'],
         borderWidth: 1
       }]
     },
     options: {
       legend: {
         display: false,
       },
       responsive: true, // Instruct chart js to respond nicely.
       maintainAspectRatio: true, // Add to prevent default behaviour of full-width/height
     }
   });
   //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 Implementation Definition', 'Pre-Implementation Definition', 'Implementation Definition'],

         ],

         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:'].concat(data.datasets[tooltipItems[0].datasetIndex].info)
         }
       },
       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>

Upvotes: 1

Views: 812

Answers (1)

Swati
Swati

Reputation: 28522

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>

Upvotes: 1

Related Questions