javascript - Angularjs Charts are not resizing -
i have small webapp using angularjs , trying sue 2 charts angularjs library. using bar , pie. rendering fine reason refuse resize display 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 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 charts chartjsprovider.setoptions({ colours: ['#ff0000', '#0000ff'], responsive: true }); // configure pie charts chartjsprovider.setoptions('pie', { datasetfill: true, chartlegend: true }); // configure 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(){ } })
what mean "display small or bigger"? if parent container resizes chart won't resize chart.js library can listen window resize event (there no other resize event can listened to).
in latest version, can trigger resize event if programmatically resize parent container window emitting $resize
event on scope
. see https://github.com/jtblin/angular-chart.js/#events
Comments
Post a Comment