Argon Dashboard Components
Discover 2 components available in Argon Dashboard
Chart Bar
<div class="card draggable">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
<h5 class="h3 mb-0">Total orders</h5>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
</div>
</div>
</div><div class="card draggable">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
<h5 class="h3 mb-0">Total orders</h5>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
</div>
</div>
</div>Chart Line Nav
<div class="card bg-default draggable">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
<h5 class="h3 text-white mb-0">Sales value</h5>
</div>
<div class="col">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item mr-2 mr-md-0" data-toggle="chart">
<a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
<span class="d-none d-md-block">Month</span>
<span class="d-md-none">M</span>
</a>
</li>
<li class="nav-item" data-toggle="chart">
<a href="#" class="nav-link py-2 px-3" data-toggle="tab">
<span class="d-none d-md-block">Week</span>
<span class="d-md-none">W</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-sales-dark" class="chart-line chart-canvas"></canvas>
</div>
</div>
</div>