My goal is to showcase a dashboard with a card layout. The desired layout can be seen https://i.sstatic.net/OWgpE.png:
Here is a snippet from the HTML File:
<div id="overallCanvasWrapper" class="statistic-container">
<p ng-show="emptyAlltimeStats">No data available for given filters</p>
<div ng-show="!emptyAlltimeStats">
<div class="header-piechart">Pie Chart</div>
<canvas id="pieCombined" class="chart chart-pie" chart-data="combinedData" chart-labels="labels" chart-options="options"
chart-colours="colours">
</canvas>
<div class="chart-legend">
<ul>
<li class="blue">Blue</li>
<li class="red">Red</li>
</ul>
</div>
</div>
</div>
Below is a snippet of the CSS file:
canvas{
width: 100% !important;
max-width: 450px;
height: auto !important;
}
.statistic-container {
padding: 10px;
margin-top: 20px;
margin-bottom: 20px;
margin-left: 0px;
margin-right: 0px;
padding-left: 5px;
padding-right: 5px;
height: 340px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
background-color: rgba(240,240,240,0.8);
background-blend-mode: soft-light;
}
.blue:before { background-color: #00aef3; }
.red:before { background-color: #d8171e; }
.chart-legend li:before {
display: block;
width: 5px;
height: 16px;
position: absolute;
left: 0;
top: 3px;
content: "";
}
I am looking to align the chart-legend in the center both horizontally and vertically within the remaining space of the card, even when the window size changes. Any suggestions on how I could accomplish this?