CODEWITHSUNDEEP
javascriptjquerydjangochartschart.js
Ernesto Ruiz
Ernesto Ruiz

Reputation: 820

How to change cursor on chartjs doughnut chart hover?

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>

Upvotes: 1

Views: 1470

Answers (1)

mohit jain
mohit jain

Reputation: 91

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

Upvotes: 1

Related Questions