const options = { method: 'POST', headers: {'Content-Type': 'application/json'} } fetch("/top3_users", options) .then(response => { if (!response.ok) { throw new Error(`HTTP error: ${response.status}`); } return response.json(); }).then((data) => { const ctx = document.getElementById('top-users'); new Chart(ctx, { type: 'pie', data: { labels: data["members"], datasets: [{ data: data["counts"] }] }, plugins: [ChartDataLabels], options: { maintainAspectRatio: false, plugins :{ legend: false, datalabels: { color: '#f4f6fc', formatter: function(value, context) { return context.chart.data.labels[context.dataIndex]; } }, tooltip: { callbacks: { label: (context) => { let sum = 0; let value = context.parsed; let dataArray = context.dataset.data; dataArray.map(data => { sum += data; }); let percentage = Math.round(value*100 / sum); return `${percentage}%` } } } } }, }); })