Untitled

<section class="content">
    <div class="container-fluid">
    	<div class="row">
    		<div class="col-12">
    			<div class="card card-info" id="#chartCard">
    				<div class="card-header">
    					<h3 class="card-title"></h3>
    					<div class="card-tools">
    						<button type="button" class="btn btn-tool" data-card-widget="collapse">
    							<i class="fas fa-minus"></i>
    						</button>
    					</div>
    				</div>
    				<div class="card-body">
    					<div class="col-12 text-right">
    						<button type="button" class="btn btn-primary bg-info" id="exportButton">Export PDF <i class="fas fa-file-pdf"></i> </button>
    					</div>
    					<div class="chart">
    						<div id="chartContainerStacked" style="height: 370px; width: 100%;"></div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    </div>
</section>

<div class="modal fade" id="detailStackChart" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
		<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title font-weight-bold" id="exampleModalLongTitle">TITLE HERE</h5>
					<button id="close3" type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
				</div>
				<div class="modal-body">
					<div class="row">
						<div class="chart">
							<div id="chartStackContainer2" style="height: 400px; width: 100%;"></div>
						</div>
					</div>
					<div class="row" id="detailStack" hidden>
						<<div class="chart">
							<div id="chartStackContainer3" style="height: 400px; width: 100%;"></div>
						</div>
					</div>
				</div>
				
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-dismiss="modal" id="close4">Tutup</button>
				</div>
			</div>
		</div>
	</div>