How do i remove the border line of Angularjs doughnut chart and reduve the thickness of the arc.
HTML
<canvas id="doughnut" class="chart chart-doughnut" chart-colors="preColors" chart-dataset-override="datasetOverridePres" chart-dataset-options="preLegend" chart-data="preData" chart-labels="preName">
</canvas>
JS
$scope.preColors = ['#febe05','#f3f3f3'];
$scope.preData = [343,78];
Thank you
I changed a bit your code (I think chart-dataset-options is incorrect) :
<canvas id="doughnut" class="chart chart-doughnut"
chart-colors="preColors"
chart-options="preLegend"
chart-data="preData"
chart-labels="preName"
chart-dataset-override="preOverride">
</canvas>
And The JS:
$scope.preColors = ['#febe05', '#f3f3f3'];
$scope.preData = [343, 78];
$scope.preName = ['a', 'b'];
$scope.preLegend = {
cutoutPercentage: 80, //arc thickness
elements: {
arc: {
borderWidth: 0 // border line
}
}
}
$scope.preOverride = [{}];
Result:

Live demo: SkinnyDoughnout
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With