Line chart not displaying correctly within modal box - html

Question

I am new to HTML jquery. I'm stuck on the below issue and unsure not sure how to go about solving it.
I have added a line chart onto a modal box. The chart displays, but only at half the height of the modal height, when I would have expected the entire modal height to be used.
My HTML code is follows
<div id = "myModal" class="modal">
<div class="modalContent">
<span class = "close"> </span>
<div id="data_chart"></div>
</div>
</div>
The jquery function I use to create the chart is below, I left out some formatting codes for simplicity.
function renderChart() {
//===========================
var len = data_obj["trend"]["x"].length;
var trend_data = []
for (var i=0; i<len; i++){
var d = new Date(data_obj["trend"]["x"][i]);
var t = {"date": d, "value": data_obj["trend"]["y"][i]};
trend_data.push(t)};
var chart = am4core.create("data_chart", am4charts.XYChart);
chart.data=trend_data;
var title = chart.titles.create();
title.text = "Pulse Index";
title.marginBottom = 30;
title.fontSize = 16;
var dateAxis_line = chart.xAxes.push(new am4charts.DateAxis());
dateAxis_line.renderer.inside = true;
dateAxis_line.renderer.grid.template.disabled = true;
// Create value axis
var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
};
The output of the modal & chart shows the chart's height is not fully occupying the height of the modal box. I am not sure why.
For more detail, the DOM details are
Many thanks!