View samples of line charts below along with the source code, so you can integrate right away.
<!-- Line chart -->
<div id="earning" class="apex-charts"></div>
<!-- End Line chart -->Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars.
<!-- bar chart -->
<div id="orderColumn" class="apex-charts"></div>
<!-- End bar chart --> JavaScript Pie Charts and JavaScript Donut Charts are optimally used in the display of just a few sets of data.
<!-- donut chart -->
<div id="traffic" class="apex-charts d-flex justify-content-center"></div>
<!-- End donut chart --> View samples of line charts below along with the source code, so you can integrate right away.
Update your payout method in settings.
<div class="row">
<div class="col-xl-3 col-lg-4 col-md-12 col-12 mb-3 mb-lg-0">
<div class="">
<i
class="fe fe-shopping-cart icon-shape icon-sm rounded-3 bg-light-success text-dark-success mt-2"></i>
<h3 class="display-4 fw-bold mt-3 mb-0">$3,210</h3>
<span>Your total earnings</span>
<hr class="my-4">
<div class="row">
<!-- Total Earning Chart -->
<div class="col ps-0">
<div id="totalEarning" class="apex-charts mt-n4 mb-n3"></div>
</div>
<div class="col-auto"><span class="badge bg-success "><i
class="fe fe-trending-up fs-6 me-2"></i>32%</span></div>
</div>
<p class="mb-0 lh-1.5">Update your payout method in settings.</p>
</div>
</div>
<!-- Earning Chart -->
<div class="col-xl-9 col-lg-8 col-md-12 col-12">
<div id="earningTwo" class="apex-charts"></div>
</div>
</div> Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars.
Your selected payout method was confirmed on Next Payout on 15 July, 2020
<div>
<div class="alert bg-light-warning text-dark-warning alert-dismissible fade show" role="alert">
<strong>payout@showyourtrades.com</strong>
<p class="mb-0">Your selected payout method was confirmed on Next Payout on 15 July, 2020</p>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="row mt-6">
<div class="col-xl-4 col-lg-4 col-md-12 col-12 mb-3 mb-lg-0">
<div class="text-center">
<!-- PayOut Chart -->
<div id="payoutChart" class="apex-charts"></div>
<h4 class="mb-1">Your Earning this month</h4>
<h5 class="mb-0 display-4 fw-bold">$3,210</h5>
<p class="px-4">Update your payout method in settings</p>
<a href="#" class="btn btn-primary">
Withdraw Earning
</a>
</div>
</div>
<div class="col-xl-8 col-lg-8 col-md-12 col-12">
<!-- Check Box -->
<div class="border p-4 rounded-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio1" name="customRadio" class="form-check-input" checked />
<label class="form-check-label" for="customRadio1">
<img src="../assets/images/brand/paypal.svg" alt="" />
</label>
<p>Your paypal account has been authorized for payouts.</p>
<a href="#" class="btn btn-outline-primary"> Remove Account</a>
</div>
</div>
<!-- Check Box -->
<div class="border p-4 rounded-3 mb-3">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio2" name="customRadio" class="form-check-input" />
<label class="form-check-label ps-1" for="customRadio2">
<img src="../assets/images/brand/payoneer.svg" alt="" />
</label>
</div>
</div>
<!-- Check Box -->
<div class="border p-4 rounded-3">
<div class="custom-control custom-radio">
<input type="radio" id="customRadio3" name="customRadio" class="form-check-input" />
<label class="form-check-label ps-1 h4" for="customRadio3">
Bank Transfer
</label>
</div>
</div>
</div>
</div>
</div>