Chartjs-Chart.js why are my hover effects not working?

by

0👍

The hoover effects in your chart work fine, maybe you didn’t hoover over any point because they are not visible. I made them visible by commenting out options.elements.point.radius.

Please check your amended code below:

var chart = new Chart('myChart', {
    type: 'line',
    data: {
      datasets: [{
        label: 'Temperatur',
        borderColor: '#f00',
        backgroundColor: '#ff000033',
        data: [
          { x: "2018-12-07 08:45:17", y: 12 },
          { x: "2018-12-07 09:30:17", y: 19 },
          { x: "2018-12-07 10:15:16", y: 7 },
          { x: "2018-12-07 11:00:17", y: 15 },
          { x: "2018-12-07 12:15:16", y: 10 }
        ]
      }]
    },
    options: {
      scales: {
        xAxes: [{
            type: 'time',
            time: {
              unit: 'minute',
              displayFormats: {
                minute: 'HH:mm'
              }
            }
          },
          {
            type: 'time',
            time: {
              unit: 'day',
              displayFormats: {
                minute: 'HH:mm'
              }
            }
          }
        ],
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      },
      backgroundColor: '#011627',
      elements: {
        point: {
          // radius: 0,
          hitRadius: 5
        }
      }
    }
  }
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="myChart" height="90"></canvas>

Leave a comment