How to change cursor on chartjs doughnut chart hover?

Question

I have a doughnut chart created with chartjs. I want to chart the mouse cursor to "pointer" when I hover any of the doughnut sections. How do I do that? Here is my code

  <canvas id="myChart" width="50" height="40"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js@2.9.3/dist/Chart.min.js"></script>

<script type="text/javascript">
      
 
 const data2 = {
  labels: {{chart_labels|safe}},
  datasets: [{
    label: 'My First Dataset',
    data: {{chart_data|safe}},
    backgroundColor: [
      'rgb(54, 162, 235)',
      'rgb(255, 99, 132)',
    ],
    hoverOffset: 4
  }]
};
        var ctx = $("#myChart").get(0).getContext("2d");
              var myChart =   new Chart(ctx, {
                    type: 'doughnut', data: data2
                });
        </script>

Answer 1

You can give cursor:"pointer" to the canvas element. <canvas id="myChart" width="50" height="40" style="cursor: pointer;"></canvas>