title: Trying to set size of charts in ng2-charts
body: <p>I am trying to set the size of my charts.</p>
  
  <p>I have copy and pasted the ng2-chart example of the bar chart into my typescript file.</p>
  
  <p>If I play around with the canvas :</p>
  
  <pre><code>&lt;canvas baseChart width="100" height="100"&gt;
  </code></pre>
  
  <p>Nothing seems to happen with the size. It is always strechted to MAX.</p>
  
  <p>If I add some stylings :</p>
  
  <pre><code>    canvas {
        width: 50px;
        height: 50px;
      }
  </code></pre>
  
  <p>It is also stretched to MAX. </p>
  
  <p>It seems that the chart is being displayed in some kind of iFrame which is confusing me more.</p>
  
  <p>Any help in how to set the size of my chart?</p>
  
  <p>My code:</p>
  
  <pre><code>import {Component, OnInit} from '@angular/core';
  @Component({
      selector: 'bar-chart-component',
      template: `
  &lt;div class="row"&gt;
    &lt;div class="col-md-6"&gt;
      &lt;div style="display: block;"&gt;
      &lt;canvas baseChart width="100" height="100"
                  [datasets]="lineChartData"
                  [labels]="lineChartLabels"
                  [options]="lineChartOptions"
                  [colors]="lineChartColors"
                  [legend]="lineChartLegend"
                  [chartType]="lineChartType"
                  (chartHover)="chartHovered($event)"
                  (chartClick)="chartClicked($event)"&gt;&lt;/canvas&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="col-md-6" style="margin-bottom: 10px"&gt;
      &lt;table class="table table-responsive table-condensed"&gt;
        &lt;tr&gt;
          &lt;th *ngFor="let label of lineChartLabels"&gt;{{label}}&lt;/th&gt;
        &lt;/tr&gt;
        &lt;tr *ngFor="let d of lineChartData"&gt;
          &lt;td *ngFor="let label of lineChartLabels; let j=index"&gt;{{d &amp;&amp; d.data[j]}}&lt;/td&gt;
        &lt;/tr&gt;
      &lt;/table&gt;
      &lt;button (click)="randomize()"&gt;CLICK&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
    `,
      styles: [`
          canvas {
            width: 50px;
            height: 50px;
          }
  `]
  })
  export class BarChartComponent implements OnInit {
  
      ngOnInit(): void {
      }
  
      // lineChart
      public lineChartData: Array&lt;any&gt; = [
          {data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A'},
          {data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B'},
          {data: [18, 48, 77, 9, 100, 27, 40], label: 'Series C'}
      ];
      public lineChartLabels: Array&lt;any&gt; = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
      public lineChartOptions: any = {
          responsive: true
      };
      public lineChartColors: Array&lt;any&gt; = [
          { // grey
              backgroundColor: 'rgba(148,159,177,0.2)',
              borderColor: 'rgba(148,159,177,1)',
              pointBackgroundColor: 'rgba(148,159,177,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(148,159,177,0.8)'
          },
          { // dark grey
              backgroundColor: 'rgba(77,83,96,0.2)',
              borderColor: 'rgba(77,83,96,1)',
              pointBackgroundColor: 'rgba(77,83,96,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(77,83,96,1)'
          },
          { // grey
              backgroundColor: 'rgba(148,159,177,0.2)',
              borderColor: 'rgba(148,159,177,1)',
              pointBackgroundColor: 'rgba(148,159,177,1)',
              pointBorderColor: '#fff',
              pointHoverBackgroundColor: '#fff',
              pointHoverBorderColor: 'rgba(148,159,177,0.8)'
          }
      ];
      public lineChartLegend: boolean = true;
      public lineChartType: string = 'line';
  
      public randomize(): void {
          let _lineChartData: Array&lt;any&gt; = new Array(this.lineChartData.length);
          for (let i = 0; i &lt; this.lineChartData.length; i++) {
              _lineChartData[i] = {
                  data: new Array(this.lineChartData[i].data.length),
                  label: this.lineChartData[i].label
              };
              for (let j = 0; j &lt; this.lineChartData[i].data.length; j++) {
                  _lineChartData[i].data[j] = Math.floor((Math.random() * 100) + 1);
              }
          }
          this.lineChartData = _lineChartData;
      }
  
      // events
      public chartClicked(e: any): void {
          console.log(e);
      }
  
      public chartHovered(e: any): void {
          console.log(e);
      }
  }
  </code></pre>