score:121

Accepted answer

since version 2 the field has been renamed to cutoutpercentage.

cutoutpercentage
number 50 - for doughnut, 0 - for pie
the percentage of the chart that is cut out of the middle.

it can be used like this

var options = {        
    cutoutpercentage: 40
};

more details here http://www.chartjs.org/docs/#doughnut-pie-chart-chart-options

update: since version 3

var options = {        
    cutout: 40
};

according to the documentation at release notes of 3.x

doughnut cutoutpercentage was renamed to cutout and accepts pixels as numer and percent as string ending with %.

score:2

i wanted to add how to achieve this exactly in react.

this.mychart = new chart(this.chartref.current, {
  type: 'doughnut',
  options: {
    cutout:120
  },
  data: {
    labels: this.props.data.map(d => d.label),
    datasets: [{
      data: this.props.data.map(d => d.value),
      backgroundcolor:  object.values(chart_colors)
    }]
  }
});}

score:6

if you are using chart.js for angular via ng2-charts you would do something like this in your component.html file:

// component.html file

<canvas basechart [options]='chartoptions'>
</canvas>

// do note that other required directives are missing in this example, but that i chose to highlight the 'options' directive

and do something like this in your component.ts file:

//component.ts file

chartoptions = {
  cutoutpercentage: 80
};

a helpful source of information: available chart directives and config options for the [options] directive

score:6

since version 3 the field has been renamed to cutout.

it can be used like this since version 3 the field has been renamed to cutout.

50% - for doughnut, 0 - for pie

it can be used like this

cutout description

var option = {
    cutout:40
}

https://www.chartjs.org/docs/latest/charts/doughnut.html

score:24

use, percentageinnercutout, like:

var options = {        
    percentageinnercutout: 40
};
mynewchart = new chart(ct).doughnut(data, options);

demo:: jsfiddle

score:43

var options = {        
     cutoutpercentage: 70
};

Related Query

More Query from same tag