Estoy tratando de lograr un efecto similar a este ejemplo de dona con la esperanza de que cada pieza esté separada de la otra y, si es posible, redondee los bordes. Soy bastante nuevo en chartjs, por lo que no he tenido mucha suerte para encontrar algunas respuestas relacionadas.
Aquí está mi código js actual para el gráfico
const labelsd = <?php echo $jswallet;?>; const data = { labels: labelsd, datasets: [ { label: "Wallets", data: <?php echo $jsamount;?>, backgroundColor: [ "#1D7A46", "#C724B1", "#c7243f", "#0E75F1", "#2E8B57" ], borderColor: [ "#1D7A46", "#C724B1", "#c7243f", "#0E75F1", "#1D7A46" ], borderWidth: [1, 1, 1, 1, 1] } ] }; const config = { type: 'doughnut', data: data, options: { cutout: 140, responsive: true, plugins: { legend:{display: false}, title: {display: false,} } }, }; const minutedownloads = new Chart( document.getElementById('dailyspendings'), config );En las opciones de su gráfico, establezca cutout: "95%" y borderRadius: 3 así
const labelsd = <?php echo $jswallet;?>; const data = { labels: labelsd, datasets: [ { label: "Wallets", data: <?php echo $jsamount;?>, backgroundColor: [ "#1D7A46", "#C724B1", "#c7243f", "#0E75F1", "#2E8B57" ], borderColor: [ "#1D7A46", "#C724B1", "#c7243f", "#0E75F1", "#1D7A46" ], borderWidth: [1, 1, 1, 1, 1] } ] }; const config = { type: 'doughnut', data: data, options: { cutout: "95%", borderRadius: 3, responsive: true, plugins: { legend:{display: false}, title: {display: false,} } }, }; const minutedownloads = new Chart( document.getElementById('dailyspendings'), config );