Trying to set the size of charts in ng2 charts

Question

I am trying to set the size of my charts.

I have a copy and paste of an example ng2 chart diagram in a histogram into a typescript file.

If I play with canvas:

<canvas baseChart width="100" height="100"> 

Nothing like size. It always stretches to MAX.

If I add some styles:

  canvas { width: 50px; height: 50px; } 

It also stretches to MAX.

It seems that the chart is displayed in some kind of iFrame, which confuses me more.

Any help on adjusting the size of my chart?

My code is:

 import {Component, OnInit} from '@angular/core'; @Component({ selector: 'bar-chart-component', template: ` <div class="row"> <div class="col-md-6"> <div style="display: block;"> <canvas baseChart width="100" height="100" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColors" [legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas> </div> </div> <div class="col-md-6" style="margin-bottom: 10px"> <table class="table table-responsive table-condensed"> <tr> <th *ngFor="let label of lineChartLabels">{{label}}</th> </tr> <tr *ngFor="let d of lineChartData"> <td *ngFor="let label of lineChartLabels; let j=index">{{d && d.data[j]}}</td> </tr> </table> <button (click)="randomize()">CLICK</button> </div> </div> `, styles: [` canvas { width: 50px; height: 50px; } `] }) export class BarChartComponent implements OnInit { ngOnInit(): void { } // lineChart public lineChartData: Array<any> = [ {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<any> = ['January', 'February', 'March', 'April', 'May', 'June', 'July']; public lineChartOptions: any = { responsive: true }; public lineChartColors: Array<any> = [ { // 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<any> = new Array(this.lineChartData.length); for (let i = 0; i < this.lineChartData.length; i++) { _lineChartData[i] = { data: new Array(this.lineChartData[i].data.length), label: this.lineChartData[i].label }; for (let j = 0; j < 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); } } 

Answer 1

By setting responsive: true and maintainAspectRatio: false in the parameters, it allows you to resize the canvas using CSS and does not distort or stretch the text on the chart.

 public lineChartOptions: any = { responsive: true, maintainAspectRatio: false }; 

If you are changing your css using javascript, you need to force the chart to redraw.

A few ways to do this:

 this.lineChartData = this.lineChartData.slice(); 

or

 import { Chart } from "chart.js"; ... var ctx = this.chart.ctx; var chart = this.chart; var myChart = new Chart(ctx, chart); myChart.resize(); 

You can ignore the created iframe. It does not occupy visible space.