Ich habe mit Chart.js ein Ringdiagramm erstellt und möchte, dass es an beiden Enden abgerundete Kanten hat. Ich möchte, dass es so aussieht:

Aber ich habe es so, mit scharfen Kanten:

as Beste, was ich gefunden habe, war diese Antwort:Wie man abgerundete Ecken in ein Chart.js-Balkendiagramm einfügt, aber es ist für Balkendiagramme, und ich habe keine Ahnung, wie ich es für Donuts anpassen soll ..

Hier ist mein Code:

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
    });
}};

Weiß jemand, wie das geht?