I have recently developed a small web application using AngularJS and I have implemented two charts from the AngularJS library - a bar chart and a pie chart. Although both charts are rendering correctly, they are not resizing properly as the display size changes.
Below is the HTML code I am using:
<div class="chartWrapper" ng-show="true" layout="row" layout-align="center center" md-whiteframe="3">
<canvas id="pie" class="chart chart-pie" chart-data="pieData" chart-labels="chartLabels" chart-legend="true"></canvas>
<canvas id="bar" class="chart chart-bar" chart-data="chartData" chart-legend="true" chart-labels="chartLabels" chart-series="series"></canvas>
</div>
Here is my CSS code for the wrapper:
.chartWrapper{
margin: 0 auto;
text-align: center;
vertical-align: top;
width: 80% !important;
}
And this is the Javascript code I am using:
angular.module('app')
.config(['ChartJsProvider', function (ChartJsProvider) {
// Configure all charts
ChartJsProvider.setOptions({
colours: ['#FF0000', '#0000FF'],
responsive: true
});
// Configure all pie charts
ChartJsProvider.setOptions('Pie', {
datasetFill: true,
chartLegend: true
});
// Configure all bar charts
ChartJsProvider.setOptions('Bar', {
datasetFill: true,
chartLegend: true
});
}])
.controller('mainCtrl', function($scope){
var main = this;
$scope.answered = answered;
$scope.quAnswered = false;
$scope.pieData = [30,50];
$scope.chartData = [[30,60],[50,20]];
$scope.chartLabels = ['Female', 'Male'];
$scope.series = ['Pepsi', 'Coca-Cola'];
Chart.defaults.global.responsive = true;
function answered(){
}
})