How to vary the thickness of doughnut chart, using ChartJs.?
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 tocutout
and accepts pixels as numer and percent as string ending with%
.
var options = {
cutoutPercentage: 70
};
use, percentageInnerCutout, like:
var options = {
percentageInnerCutout: 40
};
myNewChart = new Chart(ct).Doughnut(data, options);
Demo:: jsFiddle
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
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