Angular : how to display a modal-dialog (chart) in ng-template - css

Question

My application uses Angular 8 with Bootstrap and chart.js. I trying to render a bootstrap popup in an Angular ng-template directive. The popup (graph) is shown as soon as the user clicks in the last column in a table row. But as you can see on the picture, there is a white background, half the size of the actual graph. How can I get rid of this backgound ?
html part
<tbody>
<tr *ngFor="let stock of stockList; index as i" (click)="displaySelected(stock);">
<td style="width: 30px" scope="row">{{ i + 1 }}</td>
<td style="width: 40px">{{ stock.id }}</td>
<td style="width: 70px">{{ stock.symbol }}</td>
<td style="width: 70px">{{ stock.isin }}</td>
<td style="width: 180px">{{ stock.name }}</td>
<td style="width: 40px">{{ stock.liquid }}</td>
<td [class]="getFlagClass(stock.countryCode)" style="width: 14px"></td>
<td style="width: 180px">{{ stock.exchangeName }}</td>
<td style="width: 180px">{{ stock.sector }}</td>
<td style="width: 50px">{{ stock.active }}</td>
<td style="width: 30px"><img src="assets/img/chart.png" height="30" width="30" (click)="displayChart(content, stock);"/></td>
</tr>
</tbody>
</table>
</div>
<ng-template #content let-modal>
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">[name]</h5>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<canvas id="myChart" width="1000" height="500"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="modal.close('Save click')">any action</button>
</div>
</div>
</div>
</ng-template>
Component part
displayChart(content, stock: Istock) {
// Open popup window
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).result.then((result) => {
this.closeResult = `Closed with: ${result}`;
}, (reason) => {
this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
});
const today = new Date();
const dd = today.getDate();
const mm = today.getMonth();
const yyyy = today.getFullYear();
const dateTo: Date = new Date(yyyy, mm, dd);
const dateFrom: Date = new Date(yyyy - 1, mm, dd);
// retrieve dates and Prices
this.labelsDate = new Array();
this.dataPrices = new Array();
this.http.post(this.apiUrl + '/instrument/getPrices', {id: stock.id, from: dateFrom, to: dateTo } ).subscribe( (result: IinstrumentPrice[]) => {
result.forEach(x => {
this.labelsDate.push(x.date);
this.dataPrices.push(x.close);
});
this.canvas = document.getElementById('myChart');
this.ctx = this.canvas.getContext('2d');
// display chart
const myChart = new Chart(this.ctx, {
type: 'line',
data: {
labels: this.labelsDate,
datasets: [{
label: 'Daily prices',
data: this.dataPrices,
fill: false,
borderWidth: 2,
borderColor: 'black'
}]
},
options: {
elements: { point: { radius: 0 } },
responsive: false,
display: true
}
});
});
}
css part
.row-input {
font-size: 15px;
padding-top: 2px;
padding-right: 1px;
padding-bottom: 1px;
padding-left: 2px;
}
input {
font-size: 15px;
}
.flag-us {
background-size:contain;
background-position:50%;
background-repeat:no-repeat;
position:relative;
display:inline-block;
width:1.33333333em;
line-height:1em;
background-image:url(../../assets/img/flags/united-states-of-america.png);
}
.modal-dialog{
position: relative;
display: table; /* This is important */
overflow-y: auto;
overflow-x: auto;
width: auto;
min-width: 300px;
}

Answer 1

The solution is to set a parameter {"size: 'xl'} in the open method.
displayChart(content, stock: Istock) {
// Open popup window
this.modalService.open(content, {size: 'xl'}).result.then((result) => {
and the html is also changed
<ng-template #content let-modal>
<div class="modal-header">
<div class="row">
<div class="col-sm-6">
<h4 class="modal-title">{{instrumentName}}</h4>
</div>
<div class="col-sm-8">
<div>last trading day : {{lastTradingDay}}</div>
</div>
</div>
<button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<canvas id="myChart" width="1000" height="500"></canvas>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-light" (click)="modal.close('Close click')">Close</button>
</div>
</ng-template>