How to vary the thickness of doughnut chart, using ChartJs.?
Javascriptchart.jsJavascript Problem Overview
How to vary the thickness of doughnut chart, using http://chartjs.org">ChartJs</a>
Javascript Solutions
Solution 1 - Javascript
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 %
.
Solution 2 - Javascript
var options = {
cutoutPercentage: 70
};
Solution 3 - Javascript
use, percentageInnerCutout, like:
var options = {
percentageInnerCutout: 40
};
myNewChart = new Chart(ct).Doughnut(data, options);
Demo:: jsFiddle
Solution 4 - Javascript
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
Solution 5 - Javascript
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
var option = {
cutout:40
}
Solution 6 - Javascript
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)
}]
}
});}