Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Remove Angularjs-Chart border and reduce chart arc thickness

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

like image 884
David Addoteye Avatar asked Jun 12 '26 08:06

David Addoteye


1 Answers

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:

enter image description here

Live demo: SkinnyDoughnout

like image 157
Keno Avatar answered Jun 15 '26 01:06

Keno



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!