javascriptangularjschart.jsangular-chart

Remove all borders from my chart in angular-chart-js

I'm using angular-chart-js for my charts and I want to remove all the borders in my chart. The problem is only the first one is affected and not the rest.

chart

<canvas id="doughnut" class="chart chart-doughnut" chart-data="vm.data" chart-labels="vm.labels" chart-colors="vm.chart1Color" chart-dataset-override="override"></canvas>

controller

$scope.override = { borderWidth: [0, 0] };

enter image description here

Solution

  • With angular-chart-js, you must use a chart.js version >= 2.x, so this is the way to remove borders:

    JS:

    $scope.options = { elements: { arc: { borderWidth: 0 } } };

    HTML

    <canvas ... chart-options="options"></canvas>

    DEMO: PLUNKER