Trying to set size of charts in ng2-charts

Question

I am trying to set the size of my charts.

I have copy and pasted the ng2-chart example of the bar chart into my typescript file.

If I play around with the canvas

Answer 1

By setting responsive: true and maintainAspectRatio: false in the options, it allows resizing of the canvas with CSS and does not distort or stretch the text in the chart.

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

If you change your css via javascript, you need to force the chart to repaint.

A couple of 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 iframe object that is created. It does not take up any visible space.