Statistic
Great flexibility with the usage of SVG and responsive design, the stats blocks are advanced features to present the stats of your business.
Graphic illustration #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 venueHTML:
<div class="bg-white shadow-sm rounded p-6">
<header class="d-flex justify-content-between align-items-center text-muted mb-4">
<h3 class="h6 font-weight-bold mb-0">Revenue</h3>
<small>Total: <strong class="font-size-14">12 389 00</strong> venue</small>
</header>
<div class="js-area-chart u-stats-v2 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-stats-v2__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>
<footer class="d-flex justify-content-start align-items-center text-muted">
<small class="d-inline-block mr-4">
<span class="fa fa-circle text-primary mr-1"></span>
Visitors
</small>
<small class="d-inline-block mr-4">
<span class="fa fa-circle text-warning mr-1"></span>
Orders
</small>
<div class="ml-auto">
<a class="btn btn-xs text-right u-btn-primary--air transition-3d-hover" href="#">Details</a>
</div>
</footer>
</div>
CSS library:
<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 library and initialization:
<!-- 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>
Graphic illustration #2
HTML:
<div class="row justify-content-center">
<div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
<article class="bg-white shadow-sm rounded">
<header class="p-6">
<div class="d-flex justify-content-between align-items-center mb-3">
<small class="d-block text-muted">22 February, 2018</small>
<a class="u-icon u-icon--sm u-icon-primary--air rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
<span class="fa fa-cloud-download-alt u-icon__inner"></span>
</a>
</div>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="img-fluid u-sm-avatar 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="fa fa-angle-up ml-2"></span>
</a>
</div>
</div>
</header>
<hr class="my-0">
<div class="p-6">
<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>
<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>
</div>
</article>
</div>
<div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
<article class="bg-white shadow-sm rounded">
<header class="p-6">
<div class="d-flex justify-content-between align-items-center mb-3">
<small class="d-block text-muted">22 February, 2018</small>
<a class="u-icon u-icon--sm u-icon-primary--air rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
<span class="fa fa-cloud-download-alt u-icon__inner"></span>
</a>
</div>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="img-fluid u-sm-avatar 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="fa fa-angle-down ml-2"></span>
</a>
</div>
</div>
</header>
<hr class="my-0">
<div class="p-6">
<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>
<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>
</div>
</article>
</div>
<div class="col-md-6 col-lg-4 mb-7 mb-lg-0">
<article class="bg-white shadow-sm rounded">
<header class="p-6">
<div class="d-flex justify-content-between align-items-center mb-3">
<small class="d-block text-muted">22 February, 2018</small>
<a class="u-icon u-icon--sm u-icon-primary--air rounded-circle" href="javascript:;" data-toggle="tooltip" data-placement="top" title="Download overall report">
<span class="fa fa-cloud-download-alt u-icon__inner"></span>
</a>
</div>
<div class="media align-items-center">
<div class="d-flex mr-3">
<img class="img-fluid u-sm-avatar 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="fa fa-angle-down ml-2"></span>
</a>
</div>
</div>
</header>
<hr class="my-0">
<div class="p-6">
<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>
<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>
</div>
</article>
</div>
</div>
CSS library:
<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 library and initialization:
<!-- 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>
Numbers #1
Top 25
One of the world's top research companies
100%
of our research is ranked at world standard or above
70+
research centres
Tripling
our investment in research
<div class="row">
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV1SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-warning" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c44.7,0,81,36.3,81,81c0,21.3-8.2,40.6-21.6,55.1"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-warning">Top 25</h4>
<p class="small mb-0">One of the world's top research companies</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-lg-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV2SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-primary" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c43,0,78.2,33.6,80.8,75.9"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-primary">100%</h4>
<p class="small mb-0">of our research is ranked at world standard or above</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-md-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV3SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-danger" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c26.7,0,50.4,12.9,65.2,32.9"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-danger">70+</h4>
<p class="small mb-0">research centres</p>
</div>
</div>
</div>
<div class="col-sm-6 col-lg-3 mb-7 mb-md-4">
<div class="u-stats-v1__content">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 187 187" enable-background="new 0 0 187 187" xml:space="preserve">
<g id="figuresV4SVG">
<circle class="u-fill-white" cx="93.5" cy="93.5" r="93.5"/>
<circle class="u-fill-white u-stroke-gray-50" stroke-width="7" stroke-miterlimit="10" cx="93.5" cy="93.5" r="81"/>
<path class="u-fill-none u-stroke-success" stroke-width="7" stroke-linecap="round" stroke-miterlimit="10" d="M93.5,12.5
c44.7,0,81,36.3,81,81s-36.3,81-81,81c-26.3,0-49.7-12.6-64.5-32"/>
</g>
</svg>
</figure>
<div class="u-stats-v1__info">
<h4 class="h4 text-success">Tripling</h4>
<p class="small mb-0">our investment in research</p>
</div>
</div>
</div>
</div>
Numbers #2
25
Top rated
agency companies
$19
Historical earnings
per click
50%
Average
registration rate
<div class="row justify-content-center">
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<div class="text-center">
<div class="position-relative">
<div class="u-indicator-dots">
<h4 class="display-4 text-primary mb-0">25</h4>
</div>
</div>
<p class="mb-0">Top rated<br>agency companies</p>
</div>
</div>
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<div class="text-center">
<div class="position-relative">
<div class="u-indicator-dots">
<h4 class="display-4 text-primary mb-0">$19</h4>
</div>
</div>
<p class="mb-0">Historical earnings<br>per click</p>
</div>
</div>
<div class="col-sm-4 col-lg-3 mb-7 mb-sm-0">
<div class="text-center">
<div class="position-relative">
<h4 class="display-4 text-primary mb-0">50%</h4>
</div>
<p class="mb-0">Average<br>registration rate</p>
</div>
</div>
</div>
Numbers #3
<div class="container u-space-1">
<div class="row align-items-lg-center">
<div class="col-lg-3 mb-7 mb-lg-0">
<div class="media align-items-center">
<div class="d-flex mr-3">
<span class="u-icon u-icon--lg u-icon-warning--air rounded-circle">
<span class="fab fa-bitcoin u-icon__inner"></span>
</span>
</div>
<div class="media-body">
<h3 class="h5 mb-0">1 Bitcoin</h3>
<span class="d-block text-secondary text-uppercase">BTC</span>
</div>
</div>
</div>
<div class="col-lg-9">
<ul class="list-inline row justify-content-lg-end text-secondary text-uppercase mb-0">
<li class="list-inline-item col-6 col-sm-4 col-md-auto u-ver-divider u-ver-divider--xs u-ver-divider--none-md px-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Market Cap</small>
<a class="d-block text-success" href="#">
1.3649%
<span class="fa fa-angle-up ml-2"></span>
</a>
</li>
<li class="list-inline-item col-6 col-sm-4 col-md-auto u-ver-divider u-ver-divider--xs u-ver-divider--none-md px-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Price</small>
<a class="d-block text-danger" href="#">
-1.01%
<span class="fa fa-angle-down ml-2"></span>
</a>
</li>
<li class="list-inline-item col-6 col-sm-4 col-md-auto u-ver-divider u-ver-divider--xs u-ver-divider--none-md px-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Volume <small>(24h)</small></small>
<a class="d-block text-success" href="#">
5.12%
<span class="fa fa-angle-up ml-2"></span>
</a>
</li>
<li class="list-inline-item col-6 col-sm-4 col-md-auto pl-md-7 mx-0 mb-4 mb-md-0">
<small class="d-block">Change <small>(24h)</small></small>
<a class="d-block text-danger" href="#">
-3.38%
<span class="fa fa-angle-down ml-2"></span>
</a>
</li>
</ul>
</div>
</div>
</div>
Numbers #4
2M
2 million daily active users
7k
Over 7k open job positions
10M
Over 10 million stories shared
<!-- Stats Section -->
<div class="container">
<div class="row justify-content-md-between">
<div class="col-sm-6 offset-sm-3 col-lg-4 offset-lg-0 mb-7 mb-lg-0">
<!-- Figures -->
<div class="text-center">
<h3 class="display-2 text-primary font-weight-bold">2M</h3>
<p>2 million daily active users</p>
</div>
<!-- End Figures -->
</div>
<div class="col-sm-6 col-lg-4 mb-7 mb-sm-0">
<!-- Figures -->
<div class="text-center">
<h3 class="display-2 text-primary font-weight-bold">7k</h3>
<p>Over 7k open job positions</p>
</div>
<!-- End Figures -->
</div>
<div class="col-sm-6 col-lg-4">
<!-- Figures -->
<div class="text-center">
<h3 class="display-2 text-primary font-weight-bold">10M</h3>
<p>Over 10 million stories shared</p>
</div>
<!-- End Figures -->
</div>
</div>
</div>
<!-- End Stats Section -->