I'm currently utilizing Angular in conjunction with bootstrap and Highcharts / Highcharts-angular
My issue lies in the fact that when I adjust the size of the grids, the charts do not expand to 100% width.
Below is the code snippet:
app.component.html
<button (click)="changeGrid(12)">1 Column</button>
<button (click)="changeGrid(6)">2 Columns</button>
<button (click)="changeGrid(4)">3 Columns</button>
<div class="container-fluid">
<div class="row">
<div class="col-md-{{grid}}" *ngFor="let item2 of items">
<div class="card">
<div class="card-body">
<highcharts-chart style="width:100% !important; display:block;"
[Highcharts]="Highcharts"
[constructorType]="item2.options.constructorType"
[(update)]="updateFlag"
[oneToOne]="oneToOneFlag"
[options]="item2.options">
</highcharts-chart>
</div>
</div>
</div>
</div>
app.component.ts
import { Component, OnInit } from '@angular/core';
import { HighchartsService } from 'hc.service';
import * as Highcharts from "highcharts/highstock";
import HStockTools from "highcharts/modules/stock-tools";
HStockTools(Highcharts);
export class AppComponent {
Highcharts: typeof Highcharts = Highcharts;
chart: Highcharts.Chart | null | undefined;
data: any;
updateFlag = false;
oneToOneFlag: boolean = true;
chartTypes = [];
options: any;
grid: undefined;
loadData() {
this.data = this.hcService.data();
}
changeGrid(grid: any) {
this.data[0].layout.gridcols = grid;
this.updateFlag = true;
}
The issue here is that the charts are not expanding to 100% width along with the grid / card / parent elements.
Is there a way to rectify this within the provided code?