Chart.js Donut con bordes redondeados
Creé un gráfico de anillos con Chart.js y quiero que tenga bordes redondeados en ambos extremos. Quiero que sea así:
Pero lo tengo así, con bordes afilados:
Lo mejor que encontré fue esta respuesta:Cómo poner esquinas redondeadas en un gráfico de barras Chart.js, pero es para gráficos de barras, y no tengo idea de cómo adaptarlo para donas ...
Aquí está mi código:
HTML
<div class="modal-div-canvas js-chart">
<div class="chart-canvas">
<canvas id="openedCanvas" width="1" height="1"></canvas>
<div class="chart-background"></div>
<span class="chart-unique-value">
<span class="js-count">
85
</span>
<span class="cuv-percent">%</span>
</span>
</div>
</div>
JS
var deliveredData = {
labels: [
"Value"
],
datasets: [
{
data: [85, 15)],
backgroundColor: [
"#3ec556",
"rgba(0,0,0,0)"
],
hoverBackgroundColor: [
"#3ec556",
"rgba(0,0,0,0)"
],
borderWidth: [
0, 0
]
}]
};
var deliveredOpt = {
cutoutPercentage: 88,
animation: {
animationRotate: true,
duration: 2000
},
legend: {
display: false
},
tooltips: {
enabled: false
}
};
var chart = new Chart($('#openedCanvas'), {
type: 'doughnut',
data: deliveredData,
options: deliveredOpt
});
}};
Alguien sabe como hacer esto?