CODEWITHSUNDEEP
javascripttooltipchart.jschart.js2
Will
Will

Reputation: 31

Chart.js tooltip not showing on line chart

I'm at a loss as to why my chart's tooltips aren't displaying... can anybody show me what I'm doing wrong?

The tooltips work fine if I set the chart type to "bar" but for some reason don't work with "line". I'm relatively new to chart.js and am probably making some basic newbie mistake?

Here's my current code:

   <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js"></script>
</head>
<body onLoad="ready()">
<canvas id="myChart" width="250" height="150"></canvas>
<script>
  var ctx = document.getElementById("myChart");
  var myChart = new Chart(ctx, {
    type: 'line',
    data: {
      labels:[],
      datasets: [{
        label: 'Applicants',
        data: [],//start empty
        backgroundColor: [
'rgba(10, 168, 196, 0.2)'     
        ],
        borderColor: [
'rgba(10, 168, 196, 1)' 
        ],
      }]
    },
    options: {
        tooltips: {
            enabled: true
        },
         legend: {
            display: false
         },

      scales: {
       xAxes: [{
type: 'time',
//        time: {
 //                unit: 'day'

  //         }
        }],
        yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
      },
      onClick: handleClick
    }
  });
  window.onmessage = function(event){
      myChart.data.datasets[0].data = event.data.data;
   myChart.data.labels = event.data.labels;
   myChart.update();
  };
  function handleClick(e){
    var activeBars = myChart.getElementAtEvent(e);
    var value = myChart.config.data.datasets[activeBars[0]._datasetIndex].data[activeBars[0]._index];
    var label = activeBars[0]._model.label;
    window.parent.postMessage({
      "type":"click",
      "label":label,
      "value":value
    } , "*");
  }
  function ready(){
    window.parent.postMessage({"type":"ready"}, "*");
  }
</script>
</body>
</html>

Upvotes: 3

Views: 2909

Answers (1)

Jesper Paulsen
Jesper Paulsen

Reputation: 450

For anyone having problems with this using Chartjs v3, you need to make sure you have registered the Tooltip plugin:

import { Chart, Tooltip } from 'chart.js'

Chart.register([Tooltip])

Upvotes: 6

Related Questions