javascriptreactjschart.jsdonut-chartreact-chartjs

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


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

doughnut chart image

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

doughnut chart image

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.


Solution

  • 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