CODEWITHSUNDEEP
javascriptchart.js
user14876356
user14876356

Reputation:

hide label on doughnut chart of chartjs

Thanks for the help in advance.I am using doughnut graph of chartjs.In it the percentage value labels are coming on the graph.Is there any way i can hide it.

enter image description here

 var category_doughnut_datas = [80,5,5,10];

var category_doughnut__data = {
  labels: ["Safe Zone", "Level 1","Level 2","Level 3"],
  };

var category_doughnut_options = {
  cutoutPercentage: 60,
  legend: {
    display: false,
    position: "top",
    paddingBottom: 16,
    align: "start",
    labels: {
      fontColor: "#555555",
      fontSize: 20,
      boxWidth: 0,
    },
  },
  tooltips: {
    displayColors: false,
  },
  responsive: true,
};
var dough_ctx = document.getElementById("overallStatus").getContext("2d");
if (dough_ctx) {
  var myDoughnutChart = new Chart(dough_ctx, {
    type: "doughnut",
    data: category_doughnut__data,
    options: category_doughnut_options,
  });
}

Upvotes: 3

Views: 2683

Answers (2)

Vijayawarman GS
Vijayawarman GS

Reputation: 1

options.plugins.datalabels: false should be mentioned.

Without it, the value is set to be true by default.

Upvotes: 0

LeeLenalee
LeeLenalee

Reputation: 31361

Since you dont specify any options to draw it on the chart in your options and its not default chart.js behaviour I expect you defined it as defaults somewhere, in which case you can in your options object in the plugins section specify datalabels: false to stop it from rendering:

Chart.register(ChartDataLabels);
Chart.defaults.plugins.datalabels.color = '#fff';
Chart.defaults.plugins.datalabels.formatter = (value, ctx) => {
  let sum = 0;
  let dataArr = ctx.chart.data.datasets[0].data;
  dataArr.map(data => {
    sum += data;
  });
  let percentage = (value * 100 / sum).toFixed(2) + "%";
  return percentage;
};

const options = {
  type: 'doughnut',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [12, 19, 3, 5, 2, 3],
      backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"]
    }]
  },
  options: {
    plugins: {
      datalabels: false // Removing this line shows the datalabels again
    }
  }
}

const 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.5.1/chart.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.0.0/chartjs-plugin-datalabels.js"></script>
</body>

Upvotes: 2

Related Questions