Chartjs-How to control width of chart using angular-chart and chart.js?

by

0👍

Bootstrap grid system will help you two display charts in two columns of the same row. A row in bootstrap has 12 columns. so, for a two column layout, we split them into two div of 6 each like this.

<div class="container" ng-app="app" ng-controller="ChartCtrl">
    <div class="row">
        <div class="col-md-6">
            Column1
        </div>
        <div class="col-md-6">
            Column2
        </div>
    </div>
</div>

Demo: https://jsfiddle.net/codeandcloud/vz4qhqpw/show/
Source Code: https://jsfiddle.net/codeandcloud/vz4qhqpw/

Dependencies

  1. jQuery.js
  2. Bootstrap.js
  3. Bootstrap.css

If you want them in two rows do something like

<div class="container" ng-app="app" ng-controller="ChartCtrl">
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            Column1
        </div>
    </div>
    <div class="row">
        <div class="col-md-offset-3 col-md-6">
            Column2
        </div>
    </div>
</div>

Leave a comment