CODEWITHSUNDEEP
javascriptgraphchartschart.jsdata-visualization
Rahad
Rahad

Reputation: 11

How Can customize chartjs doughnut chart border and tooltip

I want to customize chart js doughnut chart as the image below. Using The default border option I can not be able to get my expected result. Is there any way that could help me.

Chart js concept image.

here is my code: 

var doughnut = document.getElementById("doChart");
var myDoughnutChart = new Chart(doughnut, {
    type: 'doughnut',
    data: {
    labels:["completed","unpaid", "pending", "canceled"],
    datasets: [{
        label: "My First dataset",
        data: [4100,2500, 1800, 2300],
        backgroundColor: ['#4c84ff','#29cc97','#8061ef','#fec402'],
        borderColor: ['#4c84ff','#29cc97','#8061ef','#fec402']
     }]
   },
  options: {

  }
});

Upvotes: 1

Views: 9453

Answers (2)

Ben Anton
Ben Anton

Reputation: 41

The percentage of the chart that is cut out of the middle is defined by cutoutPercentage, e.g.:

options: {
    cutoutPercentage: 80, 
}

Upvotes: 1

ปวิช แสงรัศมี
ปวิช แสงรัศมี

Reputation: 1

Add percentageInnerCutout: 70 in options

options: { percentageInnerCutout: 70, // make doughnut chart slim }

Upvotes: 0

Related Questions