ts:
templateStyle = {
display: 'grid',
'grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)',
'grid-template-rows': '150px auto auto',
'grid-gap': '10px',
border: '1px solid #2196F3',
padding: '10px'
}
widgets = [
{ rowStart: 1, rowEnd: 2, colStart: 1, colEnd: 2, ... },
{ rowStart: 1, rowEnd: 2, colStart: 2, colEnd: 3, ... },
...
{ rowStart: 2, rowEnd: 3, colStart: 1, colEnd: 2, ... },
...
];
getStyle(widget): object {
return {
position: 'relative',
'grid-row-start': widget.rowStart,
'grid-row-end': widget.rowEnd,
'grid-column-start': widget.colStart,
'grid-column-end': widget.colEnd,
'text-align': 'center',
'vertical-align': 'middle',
'min-height': card.height + 'px'
};
}
html
<div [ngStyle]="templateStyle">
<div *ngFor="let widget of widgets" [ngStyle]="getStyle(widget)">
<button (click)="addChart()">Add</button>
<div *ngIf="If chart added by above button action"
style="width: 100%; height: 100%"> // widht/height 100% to give all space of the parent
<canvas style="width: 200px; height: 200px;"
chartType="pie"
[data]="[200, 100]"
[labels]="['A', 'B']"
baseChart>
</canvas>
</div>
</div>
</div>
Eh, the line
style="width: 200px; height: 200px;width: 100%, height: 100%), the cell will grow how much space is availaible in the grid.
So I need to calculate column width somehow and give absolute values for grid, and not using percentages as:
grid-template-columns': 'calc(25%-10px) calc(25%-10px) calc(25%-10px) calc(25%-10px)fr, but have same result. For both cases, I tried to remove canvas and use just a simple container with a background, this will work perfectly, due of this, my opinion is that the canvas force the cell (parent) to be resized each time.
https://i.stack.imgur.com/L9mii.png
https://i.stack.imgur.com/vV3WB.png
I'm currently considering using d3 charts instead of chartjs if I can't find a solution for this.