CODEWITHSUNDEEP
chart.js
Shekh Saifuddin
Shekh Saifuddin

Reputation: 518

Hide labels from pie chart in chartjs

I want to remove labels from the top of pie chart. but not from mouse hover. if I comment on the labels options it shows undefined when I hover on the chart, how can I achieve that

var ctx = $("#doughnutChart").get(0).getContext('2d');
new Chart(ctx, {
   type: 'pie',
   data: { // I want to hide this labels.
     labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
     datasets: [{
       label: 'User',
       backgroundColor: colors,
       data: usersData
     }]
   },
   options: {
     responsive: true,
   }
});

enter image description here

Upvotes: 1

Views: 766

Answers (1)

LeeLenalee
LeeLenalee

Reputation: 31431

You can set the legend to display: false in the options like so:

V2:

  options: {
    legend: {
      display: false
    }
  }

V3:

  options: {
    plugins: {
      legend: {
        display: false
      }
    }
  }

V2 example:

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    legend: {
      display: false
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
</body>

V3 example:

var options = {
  type: 'pie',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      borderWidth: 1
    }]
  },
  options: {
    plugins: {
      legend: {
        display: false
      }
    }
  }
}

var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.2.0/chart.js"></script>
</body>

Upvotes: 3

Related Questions