chart.js why are my hover effects not working?

Question

I have a bit of a Problem, i've a little chart with 1440 data Points, and if i display the chart fullscreen, the chart doesn't shows up any hover effects, this includes the tooltips too. If i look at the Chart with open Dev Tools in chrome, all works fine... Here is my Code:

var chart = new Chart(
  ctx,
  {
    type: 'line',
    data: {
      datasets: [{
        label: 'Temperatur',
        borderColor: '#f00',
        backgroundColor: '#ff000033',
        data: [],
      }]
    },
    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
          }
      }
    }
  }
);

if you have any ideas, how i can get the hover effects working, let me know! Thanks

Edit:

I've figured something out. in one specific resolution, the chart is constantly updating the charts(1471x735) resolution, i've tried different resolutions, and they all work fine..

uminder uminder · Accepted Answer · 2020-04-19T04:39:53

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>

chart.js why are my hover effects not working?

Edit:

1 Answers