Statistics - Interactive

Great flexibility with the usage of SVG and responsive design, the stats blocks are advanced features to present the stats of your business.

Interactive #1

This chart uses the showArea option to draw line, dots but also an area shape.

For more detailed charts information, see Charts page.

Revenue

Total: 12 389 00 venue
                  
                    <!-- Stats -->
                    <div class="card border-0 shadow-sm">
                      <div class="card-body p-6">
                        <!-- Header -->
                        <header class="d-flex justify-content-between align-items-center text-muted mb-4">
                          <h3 class="h6 font-weight-semi-bold mb-0">Revenue</h3>
                          <small>Total: <strong class="font-size-1">12 389 00</strong> venue</small>
                        </header>
                        <!-- End Header -->

                        <!-- Chart -->
                        <div class="js-area-chart u-area-chart mb-4"
                             data-height="16rem"
                             data-mobile-height="16rem"
                             data-offset-x="30"
                             data-offset-y="0"
                             data-postfix="m"
                             data-is-show-area="true"
                             data-is-show-line="false"
                             data-is-show-point="true"
                             data-is-full-width="true"

                             data-is-stack-bars="true"
                             data-is-show-axis-x="false"
                             data-is-show-axis-y="true"
                             data-is-show-tooltips="true"
                             data-tooltip-description-position="center"
                             data-tooltip-custom-class="u-area-chart__tooltip"

                             data-align-text-axis-x="center"
                             data-fill-opacity=".8"
                             data-fill-colors='["#ffc107", "#377dff"]'
                             data-stroke-width=".0625rem"
                             data-stroke-color="#f0f4f7"
                             data-stroke-dash-array="0"
                             data-text-size-x=".75rem"
                             data-text-color-x="#77838f"
                             data-text-offset-top-x="10"

                             data-text-size-y=".75rem"
                             data-text-color-y="#77838f"
                             data-points-colors='["#ffc107", "#377dff"]'
                             data-series='[[
                                {"meta": "Orders", "value": 2000},
                                {"meta": "Orders", "value": 6000},
                                {"meta": "Orders", "value": 5500},
                                {"meta": "Orders", "value": 7000},
                                {"meta": "Orders", "value": 6000},
                                {"meta": "Orders", "value": 7500}
                              ], [
                                {"meta": "Visits", "value": 3000},
                                {"meta": "Visits", "value": 5000},
                                {"meta": "Visits", "value": 4000},
                                {"meta": "Visits", "value": 7000},
                                {"meta": "Visits", "value": 6500},
                                {"meta": "Visits", "value": 7000}
                             ]]'
                             data-labels='["Jan", "Feb", "Apr", "May", "Jun", "Jul"]'></div>
                        <!-- End Chart -->

                        <!-- Footer -->
                        <footer class="d-flex justify-content-start align-items-center text-muted">
                          <small class="d-inline-block mr-4">
                            <span class="fas fa-circle text-primary mr-1"></span>
                            Visitors
                          </small>
                          <small class="d-inline-block mr-4">
                            <span class="fas fa-circle text-warning mr-1"></span>
                            Orders
                          </small>
                          <div class="ml-auto">
                            <a class="btn btn-xs text-right btn-soft-primary transition-3d-hover" href="#">Details</a>
                          </div>
                        </footer>
                        <!-- End Footer -->
                      </div>
                    </div>
                    <!-- End Stats -->
                  
                
                  
                    <link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
                    <link rel="stylesheet" href="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.css">
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>
                    <script src="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.js"></script>

                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/js/components/hs.chartist-area-chart.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of charts
                        $.HSCore.components.HSAreaChart.init('.js-area-chart');
                      });
                    </script>
                  
                

Interactive #2

22 February, 2018
United States Flag

35, 298 USD

1.3649%

Goal: $70,000

Duration: 1 week

22 February, 2018
United States Flag

27, 092 LP

-4.812%

Goal: $12,500

Duration: 1 month

22 February, 2018
United States Flag

7, 233 EURO

-8.4%

Goal: $45,500

Duration: 3 weeks

                  
                    <div class="card-deck d-block d-lg-flex card-lg-gutters-3">
                      <!-- Charts -->
                      <div class="card border-0 shadow-sm mb-5 mb-lg-0">
                        <header class="card-header p-6">
                          <!-- Info -->
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <small class="d-block text-muted">22 February, 2018</small>
                            <a class="btn btn-sm btn-icon btn-soft-primary rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
                              <span class="fas fa-cloud-download-alt btn-icon__inner"></span>
                            </a>
                          </div>
                          <!-- End Info -->

                          <!-- Statistics -->
                          <div class="media align-items-center">
                            <div class="u-avatar mr-3">
                              <img class="img-fluid rounded-circle" src="../../assets/vendor/flag-icon-css/flags/1x1/us.svg" alt="United States Flag">
                            </div>
                            <div class="media-body">
                              <h3 class="h6 mb-0">35, 298 USD</h3>
                              <a class="small text-success" href="#">
                                1.3649%
                                <span class="fas fa-angle-up ml-2"></span>
                              </a>
                            </div>
                          </div>
                          <!-- End Statistics -->
                        </header>

                        <div class="card-body p-6">
                          <!-- Goal -->
                          <div class="row mb-7">
                            <div class="col-6">
                              <h4 class="small text-muted">
                                Goal: <strong class="text-secondary">$70,000</strong>
                              </h4>
                              <div class="js-hr-progress progress" style="height: 6px;">
                                <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <div class="col-6">
                              <h4 class="small text-muted">
                                Duration: <strong class="text-secondary">1 week</strong>
                              </h4>
                              <div class="js-hr-progress progress" style="height: 6px;">
                                <div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 50%;" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                          </div>
                          <!-- End Goal -->

                          <!-- Chart -->
                          <div class="js-bar-chart"
                               data-series='[
                                 [10,8,5,7,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8,5,7,6,6,10,6,6,10,10,8]
                               ]'
                               data-is-show-axis-x="false"
                               data-is-show-axis-y="false"
                               data-height="62px"
                               data-high="10"
                               data-low="0"
                               data-distance="5"
                               data-stroke-width="6"
                               data-stroke-color="#19a0ff"></div>
                          <!-- Chart -->
                        </div>
                      </div>
                      <!-- End Charts -->

                      <!-- Charts -->
                      <div class="card border-0 shadow-sm mb-5 mb-lg-0">
                        <header class="card-header p-6">
                          <!-- Info -->
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <small class="d-block text-muted">22 February, 2018</small>
                            <a class="btn btn-sm btn-icon btn-soft-primary rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
                              <span class="fas fa-cloud-download-alt btn-icon__inner"></span>
                            </a>
                          </div>
                          <!-- End Info -->

                          <!-- Statistics -->
                          <div class="media align-items-center">
                            <div class="u-avatar mr-3">
                              <img class="img-fluid rounded-circle" src="../../assets/vendor/flag-icon-css/flags/1x1/gb.svg" alt="United States Flag">
                            </div>
                            <div class="media-body">
                              <h3 class="h6 mb-0">27, 092 LP</h3>
                              <a class="small text-danger" href="#">
                                -4.812%
                                <span class="fas fa-angle-down ml-2"></span>
                              </a>
                            </div>
                          </div>
                          <!-- End Statistics -->
                        </header>

                        <div class="card-body p-6">
                          <!-- Goal -->
                          <div class="row mb-7">
                            <div class="col-6">
                              <h4 class="small text-muted">
                                Goal: <strong class="text-secondary">$12,500</strong>
                              </h4>
                              <div class="js-hr-progress progress" style="height: 6px;">
                                <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 12%;" aria-valuenow="12" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <div class="col-6">
                              <h4 class="small text-muted">
                                Duration: <strong class="text-secondary">1 month</strong>
                              </h4>
                              <div class="js-hr-progress progress" style="height: 6px;">
                                <div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 15%;" aria-valuenow="15" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                          </div>
                          <!-- End Goal -->

                          <!-- Chart -->
                          <div class="js-bar-chart"
                               data-series='[
                                 [3,5,5,7,6,1,10,1,8,5,7,2,6,10,6,6,4,10,8,5,7,2,6,10,6,6,10,1,8]
                               ]'
                               data-is-show-axis-x="false"
                               data-is-show-axis-y="false"
                               data-height="62px"
                               data-high="10"
                               data-low="0"
                               data-distance="5"
                               data-stroke-width="6"
                               data-stroke-color="#ec5245"></div>
                          <!-- Chart -->
                        </div>
                      </div>
                      <!-- End Charts -->

                      <!-- Charts -->
                      <div class="card border-0 shadow-sm">
                        <header class="card-header p-6">
                          <!-- Info -->
                          <div class="d-flex justify-content-between align-items-center mb-3">
                            <small class="d-block text-muted">22 February, 2018</small>
                            <a class="btn btn-sm btn-icon btn-soft-primary rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
                              <span class="fas fa-cloud-download-alt btn-icon__inner"></span>
                            </a>
                          </div>
                          <!-- End Info -->

                          <!-- Statistics -->
                          <div class="media align-items-center">
                            <div class="u-avatar mr-3">
                              <img class="img-fluid rounded-circle" src="../../assets/vendor/flag-icon-css/flags/1x1/de.svg" alt="United States Flag">
                            </div>
                            <div class="media-body">
                              <h3 class="h6 mb-0">7, 233 EURO</h3>
                              <a class="small text-danger" href="#">
                                -8.4%
                                <span class="fas fa-angle-down ml-2"></span>
                              </a>
                            </div>
                          </div>
                          <!-- End Statistics -->
                        </header>

                        <div class="card-body p-6">
                          <!-- Goal -->
                          <div class="row mb-7">
                            <div class="col-6">
                              <h4 class="small text-muted">
                                Goal: <strong class="text-secondary">$45,500</strong>
                              </h4>
                              <div class="js-hr-progress progress" style="height: 6px;">
                                <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                            <div class="col-6">
                              <h4 class="small text-muted">
                                Duration: <strong class="text-secondary">3 weeks</strong>
                              </h4>
                              <div class="js-hr-progress progress" style="height: 6px;">
                                <div class="js-hr-progress-bar progress-bar bg-warning" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                              </div>
                            </div>
                          </div>
                          <!-- End Goal -->

                          <!-- Chart -->
                          <div class="js-bar-chart"
                               data-series='[
                                 [2,3,5,7,4,6,5,6,8,7,7,6,6,10,6,6,10,7,8,5,7,6,3,10,6,6,1,3,1]
                               ]'
                               data-is-show-axis-x="false"
                               data-is-show-axis-y="false"
                               data-height="62px"
                               data-high="10"
                               data-low="0"
                               data-distance="5"
                               data-stroke-width="6"
                               data-stroke-color="#fdd14e"></div>
                          <!-- Chart -->
                        </div>
                      </div>
                      <!-- End Charts -->
                    </div>
                  
                
                  
                    <link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
                    <link rel="stylesheet" href="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.css">
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/appear.js"></script>
                    <script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>
                    <script src="../../assets/vendor/chartist-js-tooltip/chartist-plugin-tooltip.js"></script>

                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/js/components/hs.progress-bar.js"></script>
                    <script src="../../assets/js/components/hs.chartist-bar-chart.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar'
                        });

                        // initialization of chartist bar charts
                        $.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
                      });
                    </script>
                  
                

Interactive #3

                  
                    <div class="container space-2">
                      <div class="row">
                        <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                          <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
                            <!-- Pie Circle -->
                            <div class="js-pie text-center"
                                 data-circles-text-class="u-stats-progress__info"
                                 data-circles-value="25"
                                 data-circles-max-value="100"
                                 data-circles-bg-color="#f8fafd"
                                 data-circles-fg-color="#ffc107"
                                 data-circles-fg-stroke-linecap="round"
                                 data-circles-fg-stroke-miterlimit="10"
                                 data-circles-radius="100"
                                 data-circles-stroke-width="8"
                                 data-circles-additional-text="Top "
                                 data-circles-additional-text-type="prefix"
                                 data-circles-duration="2000"
                                 data-circles-scroll-animate="true"
                                 data-circles-color="#ffc107"
                                 data-circles-font-size="24"
                                 data-circles-font-weight="500"
                                 data-circles-secondary-text="One of the world's top research companies"
                                 data-circles-secondary-color="#77838f"
                                 data-circles-secondary-font-size="13"
                                 data-circles-secondary-font-weight="400"
                                 data-circles-divider-space="10"></div>
                            <!-- End Pie Circle -->
                          </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                          <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
                            <!-- Pie Circle -->
                            <div class="js-pie text-center"
                                 data-circles-text-class="u-stats-progress__info"
                                 data-circles-value="90"
                                 data-circles-max-value="100"
                                 data-circles-bg-color="#f8fafd"
                                 data-circles-fg-color="#377dff"
                                 data-circles-fg-stroke-linecap="round"
                                 data-circles-fg-stroke-miterlimit="10"
                                 data-circles-radius="100"
                                 data-circles-stroke-width="8"
                                 data-circles-additional-text="%"
                                 data-circles-duration="2000"
                                 data-circles-scroll-animate="true"
                                 data-circles-color="#377dff"
                                 data-circles-font-size="24"
                                 data-circles-font-weight="500"
                                 data-circles-secondary-text="of our research is ranked at world standard or above"
                                 data-circles-secondary-color="#77838f"
                                 data-circles-secondary-font-size="13"
                                 data-circles-secondary-font-weight="400"
                                 data-circles-divider-space="10"></div>
                            <!-- End Pie Circle -->
                          </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                          <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
                            <!-- Pie Circle -->
                            <div class="js-pie text-center"
                                 data-circles-text-class="u-stats-progress__info"
                                 data-circles-value="70"
                                 data-circles-max-value="100"
                                 data-circles-bg-color="#f8fafd"
                                 data-circles-fg-color="#de4437"
                                 data-circles-fg-stroke-linecap="round"
                                 data-circles-fg-stroke-miterlimit="10"
                                 data-circles-radius="100"
                                 data-circles-stroke-width="8"
                                 data-circles-additional-text="+"
                                 data-circles-duration="2000"
                                 data-circles-scroll-animate="true"
                                 data-circles-color="#de4437"
                                 data-circles-font-size="24"
                                 data-circles-font-weight="500"
                                 data-circles-secondary-text="research centres"
                                 data-circles-secondary-color="#77838f"
                                 data-circles-secondary-font-size="13"
                                 data-circles-secondary-font-weight="400"
                                 data-circles-divider-space="10"></div>
                            <!-- End Pie Circle -->
                          </div>
                        </div>

                        <div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
                          <div class="u-stats-progress position-relative d-flex align-items-center justify-content-center">
                            <!-- Pie Circle -->
                            <div class="js-pie text-center"
                                 data-circles-text-class="u-stats-progress__info"
                                 data-circles-is-hide-value="true"
                                 data-circles-value="40"
                                 data-circles-max-value="100"
                                 data-circles-bg-color="#f8fafd"
                                 data-circles-fg-color="#00c9a7"
                                 data-circles-fg-stroke-linecap="round"
                                 data-circles-fg-stroke-miterlimit="10"
                                 data-circles-radius="100"
                                 data-circles-stroke-width="8"
                                 data-circles-additional-text="Tripling"
                                 data-circles-additional-text-type="prefix"
                                 data-circles-duration="2000"
                                 data-circles-scroll-animate="true"
                                 data-circles-color="#00c9a7"
                                 data-circles-font-size="24"
                                 data-circles-font-weight="500"
                                 data-circles-secondary-text="our investment in research"
                                 data-circles-secondary-color="#77838f"
                                 data-circles-secondary-font-size="13"
                                 data-circles-secondary-font-weight="400"
                                 data-circles-divider-space="10"></div>
                            <!-- End Pie Circle -->
                          </div>
                        </div>
                      </div>
                    </div>
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/appear.js"></script>
                    <script src="../../assets/vendor/circles/circles.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.chart-pie.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of chart pies
                        var items = $.HSCore.components.HSChartPie.init('.js-pie');
                      });
                    </script>
                  
                

Interactive #4

Image Description

We're coming soon.

Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.

Days
Hours
Mins
Secs
                  
                    <!-- Hero Section -->
                    <div class="d-lg-flex">
                      <div class="container d-lg-flex align-items-lg-center height-lg-100vh space-bottom-1 space-top-3 space-bottom-lg-3 space-lg-0">
                        <div class="row align-items-lg-center w-100 mt-lg-9">
                          <!-- SVG Icon -->
                          <div class="col-lg-6 mb-7 mb-lg-0">
                            <figure id="SVGvirtualReality" class="svg-preloader ie-virtual-reality">
                              <img class="js-svg-injector" src="../../assets/svg/illustrations/virtual-reality.svg" alt="Image Description"
                                   data-parent="#SVGvirtualReality">
                            </figure>
                          </div>
                          <!-- End SVG Icon -->

                          <div class="col-lg-6">
                            <div class="pl-lg-4">
                              <!-- Title -->
                              <div class="mb-4">
                                <h1 class="text-primary font-weight-normal">We're coming <span class="font-weight-semi-bold">soon</span>.</h1>
                                <p>Our website is under construction. We'll be here soon with our new awesome site, subscribe to be notified.</p>
                              </div>
                              <!-- End Title -->

                              <!-- Countdown -->
                              <div class="js-countdown row mb-5"
                                   data-end-date="2020/11/30"
                                   data-month-format="%m"
                                   data-days-format="%D"
                                   data-hours-format="%H"
                                   data-minutes-format="%M"
                                   data-seconds-format="%S">
                                <div class="col-3">
                                  <strong class="js-cd-days h3 text-primary font-weight-semi-bold mb-0"></strong>
                                  <span class="h5 font-weight-normal mb-0">Days</span>
                                </div>
                                <div class="col-3">
                                  <strong class="js-cd-hours h3 text-primary font-weight-semi-bold mb-0"></strong>
                                  <span class="h5 font-weight-normal mb-0">Hours</span>
                                </div>
                                <div class="col-3">
                                  <strong class="js-cd-minutes h3 text-primary font-weight-semi-bold mb-0"></strong>
                                  <span class="h5 font-weight-normal mb-0">Mins</span>
                                </div>
                                <div class="col-3">
                                  <strong class="js-cd-seconds h3 text-primary font-weight-semi-bold mb-0"></strong>
                                  <span class="h5 font-weight-normal mb-0">Secs</span>
                                </div>
                              </div>
                              <!-- End Countdown -->

                              <!-- Input -->
                              <form class="js-validate js-form-message js-focus-state">
                                <label class="sr-only" for="subscribeSrEmail">Enter your email address</label>
                                <div class="input-group">
                                  <input type="text" class="form-control" name="name" id="subscribeSrEmail" placeholder="Enter your email address" aria-label="Enter your email address" aria-describedby="subscribeEmailButton" required
                                         data-msg="Please enter a valid email address."
                                         data-error-class="u-has-error"
                                         data-success-class="u-has-success">
                                  <div class="input-group-append">
                                    <button type="submit" class="btn btn-primary" id="subscribeEmailButton">Subscribe</button>
                                  </div>
                                </div>
                              </form>
                              <!-- End Input -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <!-- End Hero Section -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/svg-injector/dist/svg-injector.min.js"></script>
                    <script src="../assets/vendor/jquery-validation/dist/jquery.validate.min.js"></script>
                    <script src="../../assets/vendor/jquery.countdown.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.svg-injector.js"></script>
                    <script src="../../assets/js/components/hs.countdown.js"></script>
                    <script src="../assets/js/components/hs.validation.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(window).on('load', function () {
                        // initialization of svg injector module
                        $.HSCore.components.HSSVGIngector.init('.js-svg-injector');

                        // initialization of countdowns
                        var countdowns = $.HSCore.components.HSCountdown.init('.js-countdown', {
                          yearsElSelector: '.js-cd-years',
                          monthElSelector: '.js-cd-month',
                          daysElSelector: '.js-cd-days',
                          hoursElSelector: '.js-cd-hours',
                          minutesElSelector: '.js-cd-minutes',
                          secondsElSelector: '.js-cd-seconds'
                        });

                        // initialization of form validation
                        $.HSCore.components.HSValidation.init('.js-validate');
                      });
                    </script>
                  
                

Interactive #5


Overall: $ 1,350
Monthly: $425
                  
                    <!-- Stats -->
                    <div class="bg-primary shadow-primary-lg rounded pt-4 pb-5 px-5">
                      <!-- Title & Settings -->
                      <div class="d-flex justify-content-between align-items-center">
                        <h4 class="h6 text-white mb-0">Referrals</h4>

                        <!-- Settings Dropdown -->
                        <div class="position-relative">
                          <a id="referralsSettingsDropdownInvoker" class="btn btn-sm btn-icon btn-soft-light btn-bg-transparent" href="javascript:;" role="button"
                             aria-controls="referralsSettingsDropdown"
                             aria-haspopup="true"
                             aria-expanded="false"
                             data-unfold-event="click"
                             data-unfold-target="#referralsSettingsDropdown"
                             data-unfold-type="css-animation"
                             data-unfold-duration="300"
                             data-unfold-delay="300"
                             data-unfold-hide-on-scroll="true"
                             data-unfold-animation-in="slideInUp"
                             data-unfold-animation-out="fadeOut">
                            <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                          </a>

                          <div id="referralsSettingsDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="referralsSettingsDropdownInvoker" style="min-width: 190px;">
                            <a class="dropdown-item" href="#">
                              <small class="fas fa-cogs dropdown-item-icon"></small>
                              Settings
                            </a>
                            <a class="dropdown-item" href="#">
                              <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                              Download
                            </a>
                            <a class="dropdown-item" href="#">
                              <small class="fas fa-archive dropdown-item-icon"></small>
                              Archive
                            </a>
                          </div>
                        </div>
                        <!-- End Settings Dropdown -->
                      </div>
                      <!-- End Title & Settings -->

                      <hr class="opacity-md mt-3 mb-4">

                      <!-- Referral Info -->
                      <div class="py-2">
                        <div class="row">
                          <div class="col-6">
                            <div class="mb-3">
                              <span class="d-block text-white-70 font-size-1">Overall:</span>
                              <span class="align-top text-white">$</span>
                              <span class="text-white font-size-3 font-weight-medium text-lh-sm">1,350</span>
                            </div>
                            <span class="text-white-70 font-size-1">Monthly:</span>
                            <span class="text-white font-weight-medium font-size-1">$425</span>
                          </div>

                          <div class="col-6 align-self-end">
                            <!-- Pie Circle -->
                            <div class="js-pie text-center"
                               data-circles-text-class="content-centered-y"
                               data-circles-value="54"
                               data-circles-max-value="100"
                               data-circles-bg-color="rgba(255, 255, 255, 0.1)"
                               data-circles-fg-color="#ffffff"
                               data-circles-radius="50"
                               data-circles-stroke-width="4"
                               data-circles-duration="2000"
                               data-circles-scroll-animate="true"
                               data-circles-color="#ffffff"
                               data-circles-font-size="24"></div>
                            <!-- End Pie Circle -->
                          </div>
                        </div>
                      </div>
                      <!-- End Referral Info -->
                    </div>
                    <!-- End Stats -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/appear.js"></script>
                    <script src="../../assets/vendor/circles/circles.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.unfold.js"></script>
                    <script src="../../assets/js/components/hs.chart-pie.js"></script>
                    <script src="../../assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of unfold component
                        $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));

                        // initialization of chart pies
                        var items = $.HSCore.components.HSChartPie.init('.js-pie');

                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar'
                        });
                      });
                    </script>
                  
                

Interactive #6


$45.99
$0.00

May

Jun

Jul

Aug

                  
                    <!-- Stats -->
                    <div class="card mb-7 mb-lg-0">
                      <div class="card-body pt-4 pb-5 px-5 mb-3 mb-md-0">
                        <!-- Title & Settings -->
                        <div class="d-flex justify-content-between align-items-center">
                          <h4 class="h6 mb-0">Balance</h4>

                          <!-- Settings Dropdown -->
                          <div class="position-relative">
                            <a id="balanceSettingsDropdownInvoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" role="button"
                               aria-controls="balanceSettingsDropdown"
                               aria-haspopup="true"
                               aria-expanded="false"
                               data-unfold-event="click"
                               data-unfold-target="#balanceSettingsDropdown"
                               data-unfold-type="css-animation"
                               data-unfold-duration="300"
                               data-unfold-delay="300"
                               data-unfold-hide-on-scroll="true"
                               data-unfold-animation-in="slideInUp"
                               data-unfold-animation-out="fadeOut">
                              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                            </a>

                            <div id="balanceSettingsDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="balanceSettingsDropdownInvoker" style="min-width: 190px;">
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cogs dropdown-item-icon"></small>
                                Settings
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                                Download
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-archive dropdown-item-icon"></small>
                                Archive
                              </a>
                            </div>
                          </div>
                          <!-- End Settings Dropdown -->
                        </div>
                        <!-- End Title & Settings -->

                        <hr class="mt-3 mb-4">

                        <!-- Balance Info -->
                        <div class="row align-items-center mb-4">
                          <div class="col-6 u-ver-divider">
                            <label class="d-block small text-muted mb-0">Available:</label>
                            <span class="font-weight-medium">$45.99</span>
                          </div>

                          <div class="col-6">
                            <label class="d-block small text-muted mb-0">Pending:</label>
                            <span class="font-weight-medium">$0.00</span>
                          </div>
                        </div>

                        <div class="row">
                          <div class="col-3">
                            <div class="js-vr-progress progress-vertical rounded mb-2">
                              <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 45%;" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="text-center">
                              <h4 class="small mb-0">May</h4>
                            </div>
                          </div>
                          <div class="col-3">
                            <div class="js-vr-progress progress-vertical rounded mb-2">
                              <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 80%;" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="text-center">
                              <h4 class="small mb-0">Jun</h4>
                            </div>
                          </div>
                          <div class="col-3">
                            <div class="js-vr-progress progress-vertical rounded mb-2">
                              <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 23%;" aria-valuenow="23" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="text-center">
                              <h4 class="small mb-0">Jul</h4>
                            </div>
                          </div>
                          <div class="col-3">
                            <div class="js-vr-progress progress-vertical rounded mb-2">
                              <div class="js-vr-progress-bar bg-primary rounded-bottom" role="progressbar" style="height: 39%;" aria-valuenow="39" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                            <div class="text-center">
                              <h4 class="small mb-0">Aug</h4>
                            </div>
                          </div>
                        </div>
                        <!-- End Balance Info -->
                      </div>
                    </div>
                    <!-- End Stats -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/appear.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.unfold.js"></script>
                    <script src="../../assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of unfold component
                        $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));

                        // initialization of horizontal progress bars
                        var verticalProgressBars = $.HSCore.components.HSProgressBar.init('.js-vr-progress', {
                          direction: 'vertical',
                          indicatorSelector: '.js-vr-progress-bar'
                        });
                      });
                    </script>
                  
                

Interactive #7


$ 50,102
Deposit: $1,050
+2.1% ($122)
                  
                    <!-- Stats -->
                    <div class="card mb-7 mb-lg-0">
                      <div class="card-body pt-4 pb-5 px-5 mb-3 mb-md-0">
                        <!-- Title & Settings -->
                        <div class="d-flex justify-content-between align-items-center">
                          <h4 class="h6 mb-0">Deposits</h4>

                          <!-- Settings Dropdown -->
                          <div class="position-relative">
                            <a id="depositSettingsDropdownInvoker" class="btn btn-sm btn-icon btn-soft-secondary btn-bg-transparent" href="javascript:;" role="button"
                               aria-controls="depositSettingsDropdown"
                               aria-haspopup="true"
                               aria-expanded="false"
                               data-unfold-event="click"
                               data-unfold-target="#depositSettingsDropdown"
                               data-unfold-type="css-animation"
                               data-unfold-duration="300"
                               data-unfold-delay="300"
                               data-unfold-hide-on-scroll="true"
                               data-unfold-animation-in="slideInUp"
                               data-unfold-animation-out="fadeOut">
                              <span class="fas fa-ellipsis-h btn-icon__inner"></span>
                            </a>

                            <div id="depositSettingsDropdown" class="dropdown-menu dropdown-unfold dropdown-menu-right" aria-labelledby="depositSettingsDropdownInvoker" style="min-width: 190px;">
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cogs dropdown-item-icon"></small>
                                Settings
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-cloud-download-alt dropdown-item-icon"></small>
                                Download
                              </a>
                              <a class="dropdown-item" href="#">
                                <small class="fas fa-archive dropdown-item-icon"></small>
                                Archive
                              </a>
                            </div>
                          </div>
                          <!-- End Settings Dropdown -->
                        </div>
                        <!-- End Title & Settings -->

                        <hr class="mt-3 mb-4">

                        <!-- Deposit Info -->
                        <div class="row mb-5">
                          <div class="col-sm-6 mb-4 mb-sm-0">
                            <span class="align-top">$</span>
                            <span class="font-size-3 font-weight-medium text-lh-sm">50,102</span>
                            <div class="mb-1">
                              <span class="text-secondary font-size-1">Deposit:</span>
                              <span class="font-weight-medium font-size-1">$1,050</span>
                            </div>
                            <div>
                              <span class="text-primary font-weight-medium text-lh-sm">
                                <span class="fas fa-arrow-up text-success small"></span>
                                +2.1% ($122)
                              </span>
                            </div>
                          </div>

                          <div class="col-sm-6 align-self-end">
                            <!-- Pie Circle -->
                            <div class="js-pie text-center"
                               data-circles-text-class="content-centered-y"
                               data-circles-value="54"
                               data-circles-max-value="100"
                               data-circles-bg-color="rgba(0, 201, 167, 0.1)"
                               data-circles-fg-color="#00c9a7"
                               data-circles-radius="50"
                               data-circles-stroke-width="4"
                               data-circles-additional-text="%"
                               data-circles-duration="2000"
                               data-circles-scroll-animate="true"
                               data-circles-color="#00c9a7"
                               data-circles-font-size="24"></div>
                            <!-- End Pie Circle -->
                          </div>
                        </div>

                        <button type="button" class="btn btn-block btn-sm btn-primary transition-3d-hover">Add Funds</button>
                        <!-- End Deposit Info -->
                      </div>

                      <div class="card-footer p-5">
                        <!-- Progress Info -->
                        <div class="row align-items-center">
                          <div class="col-6 u-ver-divider">
                            <label class="small text-muted">Goal:</label>
                            <small class="font-weight-medium">$100k</small>
                            <div class="js-hr-progress progress" style="height: 4px;">
                              <div class="js-hr-progress-bar progress-bar" role="progressbar" style="width: 75%;" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>

                          <div class="col-6">
                            <label class="small text-muted">Duration:</label>
                            <small class="font-weight-medium">6 months</small>
                            <div class="js-hr-progress progress" style="height: 4px;">
                              <div class="js-hr-progress-bar progress-bar bg-success" role="progressbar" style="width: 40%;" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
                            </div>
                          </div>
                        </div>
                        <!-- End Progress Info -->
                      </div>
                    </div>
                    <!-- End Stats -->
                  
                
                  
                    <!-- JS Implementing Plugins -->
                    <script src="../../assets/vendor/appear.js"></script>
                    <script src="../../assets/vendor/circles/circles.min.js"></script>

                    <!-- JS Front -->
                    <script src="../../assets/js/components/hs.unfold.js"></script>
                    <script src="../../assets/js/components/hs.chart-pie.js"></script>
                    <script src="../../assets/js/components/hs.progress-bar.js"></script>

                    <!-- JS Plugins Init. -->
                    <script>
                      $(document).on('ready', function () {
                        // initialization of unfold component
                        $.HSCore.components.HSUnfold.init($('[data-unfold-target]'));

                        // initialization of chart pies
                        var items = $.HSCore.components.HSChartPie.init('.js-pie');

                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar'
                        });
                      });
                    </script>