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.

Design
HTML

<!-- 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.

 <!-- 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.

Design
HTML

<!-- 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.

Design
HTML

$3,210

Your total earnings

32%

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-lg bg-light-success text-dark-success mt-2"></i>
                                                                    <h3 class="display-4 font-weight-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 pl-0">
                                                                            <div id="totalEarning" class="apex-charts mt-n4 mb-n3"></div>
                                                                        </div>
                                                                        <div class="col-auto"><span class="badge badge-success "><i
                                                                                    class="fe fe-trending-up font-size-xs mr-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.

Design
HTML

payout@geeks.com

Your selected payout method was confirmed on Next Payout on 15 July, 2020

Your Earning this month

$3,210

Update your payout method in settings

Withdraw Earning

Your paypal account has been authorized for payouts.

Remove Account

Bank Transfer

<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="close" data-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 font-weight-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-lg mb-3">
                                                                     <div class="custom-control custom-radio">
                                                                        <input type="radio" id="customRadio1" name="customRadio" class="custom-control-input" checked />
                                                                        <label class="custom-control-label" for="customRadio1">
                                                                        <img src="../assets/images/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-lg mb-3">
                                                                     <div class="custom-control custom-radio">
                                                                        <input type="radio" id="customRadio2" name="customRadio" class="custom-control-input" />
                                                                        <label class="custom-control-label pl-1" for="customRadio2">
                                                                        <img src="../assets/images/payoneer.svg" alt="" />
                                                                        </label>
                                                                     </div>
                                                                  </div>
                                                                  <!-- Check Box -->
                                                                  <div class="border p-4 rounded-lg">
                                                                     <div class="custom-control custom-radio">
                                                                        <input type="radio" id="customRadio3" name="customRadio" class="custom-control-input" />
                                                                        <label class="custom-control-label pl-1 h4" for="customRadio3">
                                                                        Bank Transfer
                                                                        </label>
                                                                     </div>
                                                                  </div>
                                                               </div>
                                                            </div>
                                                         </div>