How i can i reduce the borderwidth of a chartjs dougnut chart

Question

This is what i'm trying to achieve from the mockup:

But this is what I've achieved so far using chartjs:

this is my code

 datasets: [
            {
              data: [3, 8, 13, 9, 2],
              backgroundColor: [
                "#D51F1F",
                "#9B51E0",
                "#F2994A",
                "#4BD37B",
                "#4285F4"
              ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth:1,
            borderDash:[],
            borderStyle:'dash',
            line: { borderWidth:1 }
        }]
    }

    const options= {
        responsive: false,
        maintainAspectRatio: false,
        percentageInnerCutout : 0,
     }

I'm setting borderWidth as 1, and it seems not to make the border thinner.

Answer 1

Add cutoutPercentage: 80 in your options. You can increase this to make the white area in the middle of your donut chart larger, or decrease it to make it smaller. You'll need to fiddle with it to get your chart as close to the example as you can.

Here are the docs