carlcraig / tc-angular-chartjs

AngularJS directives for Chart.js
http://carlcraig.github.io/tc-angular-chartjs/
Other
233 stars 83 forks source link

Can't change the size of charts #20

Closed jnyborg closed 9 years ago

jnyborg commented 9 years ago

I have a chart markup like this, where i set the width and height: div class="col-md-8"> canvas tc-chartjs-bar width="600" height="400" chart-options="options" chart-data="data" auto-legend>/canvas> /div> However, when rendered, it changes the size to something completely different: canvas class="ng-isolate-scope" auto-legend="" chart-data="data" chart-options="options" height="739" width="1109" tc-chartjs-bar="" style="width: 1109px; height: 739px;">/canvas>

If i remove the $scope.options, however, it renders fine, like this: canvas class="ng-isolate-scope" auto-legend="" chart-data="data" chart-options="options" height="400" width="600" tc-chartjs-bar="" style="width: 600px; height: 400px;">/canvas>

My $scope.options: $scope.options = { responsive: true, scaleBeginAtZero : true, scaleShowGridLines : true, scaleGridLineColor : "rgba(0,0,0,.05)", scaleGridLineWidth : 1, barShowStroke : true, barStrokeWidth : 2, barValueSpacing : 5, barDatasetSpacing : 1, legendTemplate : "..."

Do you know what might be the cause of this?

carlcraig commented 9 years ago

This would be responsive: true, try setting that to false to prevent the auto resizing.

jnyborg commented 9 years ago

Of course! I don't know why I didn't realize that, I guess that I'm too used to everything being responsive is a good idea. Anyways, thanks.

This directive is pretty sweet btw!