0

I have a small webapp using angularjs and I am trying to sue two charts from the angularJS library. I am using a bar and a pie. They are rendering fine but for some reason they refuse to resize as the display get small or bigger.

My HTML Code:

<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>

my CSS code for wrapper

.chartWrapper{
  margin: 0 auto;
  text-align: center;
  vertical-align: top;
  width: 80% !important;
}

My Javascript Code

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(){

  }



})
BB Developer
  • 374
  • 3
  • 18

1 Answers1

0

What do you mean by the "display get small or bigger"? If only the parent container resizes then the chart won't resize as the Chart.js library can only listen to the window resize event (there is no other resize event that can be listened to).

In the latest version, you can trigger a resize event if you programmatically resize the parent container window by emitting a $resize event on the scope. See https://github.com/jtblin/angular-chart.js/#events

WispyCloud
  • 4,140
  • 1
  • 28
  • 31