javascriptangularjsionic2chart.js

Inner Radius is not changed in Chart.js (Doughnut Chart)


I am using Chart.js I want a half doughnut chart just like the image below. But I am failed to change the thickness of the pie. I tried the property innerRadius but still it's not working

enter image description here

Here is my code

public getHalfDoughnutChart(records) {
    let data = {
       labels: ["Worked Hours","Remaining Hours"],
       datasets: [{
       label: 'Today\'s Worked Hours',
       data: [records.length? records[0].duration.hour: 0,9],
       backgroundColor: [
          'rgba(75, 174, 79, 1)',
          'rgba(255, 255, 255, 0)'
       ]
     }]
 };

    let options = {
      circumference: Math.PI,
      rotation: 1.0 * Math.PI,
      innerRadius: "10%",
      legend: {
        display: false
      },
      layout:{
        padding:40
      }, 
    }

     return this.getChart(this.halfDoughnutCanvas.nativeElement, "doughnut", data, options);
  }



getChart(context, chartType, data, options?) {
   return new Chart(context, {
      type: chartType,
      data: data,
      options: options
   });
}

Solution

  • You should use percentageInnerCutout property in options object

    let options = {
      circumference: Math.PI,
      rotation: 1.0 * Math.PI,
      percentageInnerCutout: 10,
      legend: {
        display: false
      },
      layout:{
        padding:40
      }, 
    }
    

    You can also check this question How to vary the thickness of doughnut chart, using ChartJs.?

    P.S. As I understand it depends of version, so

    If Chart.js version > 2.0 use cutoutPercentage

    Otherwise use percentageInnerCutout