Chart

Modern & Interactive Open-source Charts

https://apexcharts.com/

Line

View samples of line charts below along with the source code, so you can integrate right away.

JanJanFebFebMarchMarchAprilAprilMayMayJunJunJulJulAugAugSepSepOctOctNovNovDecDec40k40k30k30k20k20k10k10k
<!-- Line chart -->
<div id="earning" class="apex-charts"></div>
<!-- End Line chart -->

Bar

Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars.

1 Jun1 Jun9 Jun9 Jun16 Jun16 Jun18 Jun18 Jun19 Jun19 Jun22 Jun22 Jun24 Jun24 Jun26 Jun26 Jun10108866442200
 <!-- bar chart -->
<div id="orderColumn" class="apex-charts"></div>
<!-- End bar chart -->

Donut

JavaScript Pie Charts and JavaScript Donut Charts are optimally used in the display of just a few sets of data.

Direct
Referral
Organic
<!-- donut chart -->
 <div id="traffic" class="apex-charts d-flex justify-content-center"></div>
 <!-- End donut chart -->

Data with Line Chart

View samples of line charts below along with the source code, so you can integrate right away.

$3,210

Your total earnings
32%

Update your payout method in settings.

JanJanFebFebMarchMarchAprilAprilMayMayJunJunJulJulAugAugSepSepOctOctNovNovDecDec40k40k30k30k20k20k10k10k
<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 ms-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>

Data with Bar Chart

Unlike the Column chart, a JavaScript Bar Chart is oriented in a horizontal manner using rectangular bars.

Your Earning this month

$3,210

Update your payout method in settings

Withdraw Earning

Your paypal account has been authorized for payouts.

Remove Account 
<div>
<div class="alert bg-light-warning text-dark-warning alert-dismissible fade show" role="alert">
    <strong>payout@geeks.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">&times;</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>
Contents