2

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>
Will
  • 21
  • 3
  • The option is `options.tooltips` notice `tooltips` and not `tooltip`. Maybe that is why it isn't enabled for you. https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration – Andrew Lohr Jan 22 '19 at 21:52
  • If the above comment doesn't help then can you also give an example of what `event.data.data` and `event.data.labels` are? in `window.onmessage` function – Andrew Lohr Jan 22 '19 at 22:00
  • @AndrewLohr Corrected my code to tooltips, plural, and it still isn't working. My data and labels look like this: 0: "{\"day\":\"2018/11/28\",\"total\":1}" 1: "{\"day\":\"2018/12/13\",\"total\":1}" 2: "{\"day\":\"2018/12/29\",\"total\":2}" 3: "{\"day\":\"2019/1/1\",\"total\":3}" 4: "{\"day\":\"2019/1/2\",\"total\":1}" 5: "{\"day\":\"2019/1/8\",\"total\":2}" 6: "{\"day\":\"2019/2/12\",\"total\":1}" – Will Jan 24 '19 at 19:31
  • @AndrewLohr The above is how the data and labels looks in an array. Alternately, they look like this: data = 1,1,2,3,1,2,1 labels = 2018/11/28,2018/12/13,2018/12/29,2019/1/1,2019/1/2,2019/1/8,2019/2/12 – Will Jan 24 '19 at 19:33
  • The labels show for me. can you use the code snippet feature and edit your post to show an example with it not working? – Andrew Lohr Jan 24 '19 at 21:20
  • @AndrewLohr I hope I understood you correctly... I edited my post to show my current code in which the tooltips are not displaying when i hover over points on the line chart. Is this what you meant? – Will Jan 24 '19 at 22:10
  • When you edit your post there is a button above the edit box (or hit ctrl + m) that will open a window you can put html/css/js in and run it. I was hoping you could make a working one of those that shows the issue because I couldn't reproduce your issue – Andrew Lohr Jan 24 '19 at 22:24

1 Answers1

4

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])
Jesper Paulsen
  • 311
  • 3
  • 8