0
137
Viewshide 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.
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,
});
}
·
Juan Pablo Isaza
1 answers
Answer question0
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>
·
Juan Pablo Isaza
Report
Answer question