Unable to set border color on pie/doughnut charts

[anton-g]

Overview

Border color can not be set on pie or doughnut charts. I'm also been unable to set borderWidth and suspects it's related to this. See jsbin below where border should be bright green.

Step to reproduce

http://jsbin.com/qugakisure/edit?html,js,output

[jsd219]

Does #462 repair this bug #442?

[thdblood]

You need to use the chart-dataset-override.

But first, what version of angular are you using?
NOTE: the dataset-override function in angular-chart utilizes angular.merge which is only available since AngularJS v.1.4.x

in your html:
<canvas id="pieChart" class="chart chart-doughnut" chart-data="data" chart-labels="labels" chart-colors="colors" chart-dataset-override="override"> </canvas>

then in your controller:
$scope.colors = ['rgba(247,70,74,1)', 'rgba(70,191,189,1)'];
$scope.override = { borderColor: ['rgba(0, 255, 0, 1)', 'rgba(0, 255, 0, 1)'] };

[jsd219]

Thank you, that worked but what about the border color on hover? and border size?

[thdblood]

Add hoverBorderColor just like the borderColor:
$scope.override = { borderColor: ['rgba(0, 255, 0, 1)', 'rgba(0, 255, 0, 1)'], hoverBorderColor: ['rgba(0, 255, 0, 1)', 'rgba(0, 255, 0, 1)'] };

You may refer to the chart.js documentation: Pie & Doughnut Charts

[jsd219]

hoverBackgroundColor changes the pie color. What I really would like is the ability to make the border size smaller. it currently is about 2-3 pixels thick and I would like to make it 1 px

[thdblood]

Try this:
$scope.override = { borderColor: ['rgba(0, 255, 0, 1)', 'rgba(0, 255, 0, 1)'], hoverBorderColor: ['rgba(0, 255, 0, 1)', 'rgba(0, 255, 0, 1)'], borderWidth: [1, 1], hoverBorderWidth: [1, 1] };

[jsd219]

that worked! thank you so much