How to set maximum value of angularjs polar chart axis? - angularjs

Question

How to set maximum polar axis value to 100? Currently the maximum value depends on the highest value of data received.
Currently my current working code:
angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
var sum = $scope.data.reduce(function add(a, b) {
return a + b;
}, 0);
$scope.options = {
pieceLabel: {
render: function (args) {
return args.label + " " + Math.round(args.value*100/sum,2)+"%";
},
fontColor: '#000',
position: 'outside',
segment: true
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
<canvas id="pie" class="chart chart-polar-area"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</div>

Answer 1

For this you can use the scale property on options
scale: {
ticks: {
min: 0,
max: 100,
stepSize: 10
}
}
I updated your example
angular.module("app", ["chart.js"]).controller("ChartCtrl", function($scope) {
$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.data = [65, 59, 80, 81, 56, 55, 40];
var sum = $scope.data.reduce(function add(a, b) {
return a + b;
}, 0);
$scope.options = {
pieceLabel: {
render: function (args) {
return args.label + " " + Math.round(args.value*100/sum,2)+"%";
},
fontColor: '#000',
position: 'outside',
segment: true,
},
scale: {
ticks: {
min: 0,
max: 100,
stepSize: 10
}
}
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.js"></script>
<script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.js"></script>
<script src="https://rawgit.com/beaver71/Chart.PieceLabel.js/master/build/Chart.PieceLabel.min.js"></script>
<div ng-app="app" ng-controller="ChartCtrl">
<canvas id="pie" class="chart chart-polar-area"
chart-data="data" chart-labels="labels" chart-options="options">
</canvas>
</div>