[Chartjs]-Resize the width and height of the ng2-charts

by

13👍

✅

For rectangular shaped graphs (line, bar) you can include a width and height tag in the html:

<canvas baseChart width="2" height="1"
        [datasets]="chartData"
        [labels]="chartLabels"
        [options]="chartOptions"
        [colors]="chartColors"
        [legend]=true
        chartType=line></canvas>

The width and height set the aspect ratio, not the actual size.

You can do this for square shaped graphs (donut, radar, pie, polar), but it doesn’t make as much sense. It will keep a square shape, but with bigger padding on the sides or top and bottom.

Instead, you can set the exact size you want on a div containing the chart:

<div style="display: block; width: 200px; height: 200px;">
    <canvas baseChart
            [data]="doughnutChartData"
            [labels]="doughnutChartLabels"
            [chartType]="doughnutChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></canvas>
</div>

Leave a comment