Asteria Dashboard Components
Discover 8 components available in Asteria Dashboard
Chart Expenses
Chart Pie
<div class="card mb-4 z-index-2 draggable">
<div class="card-header pb-0">
<h6 class="mb-1">Market Distribution</h6>
</div>
<div class="card-body card-body px-3 pt-lg-6 pb-lg-5">
<div class="row h-100">
<div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center">
<div id="chart-pie" class="chart-pie">
</div>
</div>
</div>
</div>
</div><div class="card mb-4 z-index-2 draggable">
<div class="card-header pb-0">
<h6 class="mb-1">Market Distribution</h6>
</div>
<div class="card-body card-body px-3 pt-lg-6 pb-lg-5">
<div class="row h-100">
<div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center">
<div id="chart-pie" class="chart-pie">
</div>
</div>
</div>
</div>
</div>Chart Lines
<div class="card mb-4 draggable">
<div class="card-header pb-0 d-flex align-items-center">
<div>
<h6 class="mb-1">Sales overview</h6>
<p class="text-sm mb-0">
(+32%) more in 2021
</p>
</div>
<select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example">
<option selected>2021</option>
<option value="2020">2020</option>
</select>
</div>
<div class="card-body p-3">
<div class="chart">
<canvas class="chart-line" class="chart-canvas" height="300"></canvas>
</div>
</div>
</div><div class="card mb-4 draggable">
<div class="card-header pb-0 d-flex align-items-center">
<div>
<h6 class="mb-1">Sales overview</h6>
<p class="text-sm mb-0">
(+32%) more in 2021
</p>
</div>
<select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example">
<option selected>2021</option>
<option value="2020">2020</option>
</select>
</div>
<div class="card-body p-3">
<div class="chart">
<canvas class="chart-line" class="chart-canvas" height="300"></canvas>
</div>
</div>
</div>Chart Social
Chart Sales
Chart Interest
Chart Bar Stacked
<div class="card mb-4 z-index-2 draggable">
<div class="card-header pb-0">
<h6 class="mb-1">Stock Available</h6>
</div>
<div class="card-body">
<canvas class="chart-bar-stacked" width="400" height="200"></canvas>
</div>
</div><div class="card mb-4 z-index-2 draggable">
<div class="card-header pb-0">
<h6 class="mb-1">Stock Available</h6>
</div>
<div class="card-body">
<canvas class="chart-bar-stacked" width="400" height="200"></canvas>
</div>
</div>