Home
Framework
Theme
All
561
Forms
12
Charts
21
Navbars
38
Sidebars
26
Typography
41
Components
51
Tables
34
Cards
63
Cards Section
37
Testimonials
13
Teams Section
11
Faq
4
Headers
36
Blogs
11
Contacts Section
9
Profiles Section
13
Charts Section
7
Tables Section
15
Contents
13
Projects Section
14
Stats
7
Logo Areas
6
Authentication
10
Contact Us
5
Features
19
Pricing
7
Teams
9
Call To Actions
13
Http Codes
2


Charts - All Examples
Discover 21 Charts examples available in Loopple
Chart Bar

<div class="card draggable">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
<h5 class="h3 mb-0">Total orders</h5>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
</div>
</div>
</div>
<div class="card draggable">
<div class="card-header bg-transparent">
<h6 class="text-uppercase text-muted ls-1 mb-1">Performance</h6>
<h5 class="h3 mb-0">Total orders</h5>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-bars" class="chart-bar chart-canvas"></canvas>
</div>
</div>
</div>
Chart Line

<div class="card flex-fill w-100 draggable">
<div class="card-header">
<h5 class="card-title mb-0">Recent Movement</h5>
</div>
<div class="card-body py-3">
<div class="chart chart-sm"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<canvas id="chartjs-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas>
</div>
</div>
</div>
<div class="card flex-fill w-100 draggable">
<div class="card-header">
<h5 class="card-title mb-0">Recent Movement</h5>
</div>
<div class="card-body py-3">
<div class="chart chart-sm"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<canvas id="chartjs-dashboard-line" style="display: block; height: 252px; width: 428px;" width="856" height="504" class="chart-line chartjs-render-monitor"></canvas>
</div>
</div>
</div>
Chart Expenses
Chart Bar Background
Chart Line Nav
<div class="card bg-default draggable">
<div class="card-header bg-transparent">
<div class="row align-items-center">
<div class="col">
<h6 class="text-light text-uppercase ls-1 mb-1">Overview</h6>
<h5 class="h3 text-white mb-0">Sales value</h5>
</div>
<div class="col">
<ul class="nav nav-pills justify-content-end">
<li class="nav-item mr-2 mr-md-0" data-toggle="chart">
<a href="#" class="nav-link py-2 px-3 active" data-toggle="tab">
<span class="d-none d-md-block">Month</span>
<span class="d-md-none">M</span>
</a>
</li>
<li class="nav-item" data-toggle="chart">
<a href="#" class="nav-link py-2 px-3" data-toggle="tab">
<span class="d-none d-md-block">Week</span>
<span class="d-md-none">W</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="card-body">
<div class="chart">
<canvas id="chart-sales-dark" class="chart-line chart-canvas"></canvas>
</div>
</div>
</div>
Chart Pie

<div class="card flex-fill w-100 draggable">
<div class="card-header">
<h5 class="card-title mb-0">Browser Usage</h5>
</div>
<div class="card-body d-flex">
<div class="align-self-center w-100">
<div class="py-3">
<div class="chart chart-xs"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<canvas id="chartjs-dashboard-pie" width="856" height="400" style="display: block; height: 200px; width: 428px;" class="chart-pie chartjs-render-monitor"></canvas>
</div>
</div>
<table class="table mb-0">
<tbody>
<tr>
<td>Chrome</td>
<td class="text-end">4306</td>
</tr>
<tr>
<td>Firefox</td>
<td class="text-end">3801</td>
</tr>
<tr>
<td>IE</td>
<td class="text-end">1689</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="card flex-fill w-100 draggable">
<div class="card-header">
<h5 class="card-title mb-0">Browser Usage</h5>
</div>
<div class="card-body d-flex">
<div class="align-self-center w-100">
<div class="py-3">
<div class="chart chart-xs"><div class="chartjs-size-monitor"><div class="chartjs-size-monitor-expand"><div class=""></div></div><div class="chartjs-size-monitor-shrink"><div class=""></div></div></div>
<canvas id="chartjs-dashboard-pie" width="856" height="400" style="display: block; height: 200px; width: 428px;" class="chart-pie chartjs-render-monitor"></canvas>
</div>
</div>
<table class="table mb-0">
<tbody>
<tr>
<td>Chrome</td>
<td class="text-end">4306</td>
</tr>
<tr>
<td>Firefox</td>
<td class="text-end">3801</td>
</tr>
<tr>
<td>IE</td>
<td class="text-end">1689</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Chart Pie

<div class="card mb-4 z-index-2 draggable">
<div class="card-header pb-0">
<h6 class="mb-1">Market Distribution</h6>
</div>
<div class="card-body card-body px-3 pt-lg-6 pb-lg-5">
<div class="row h-100">
<div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center">
<div id="chart-pie" class="chart-pie">
</div>
</div>
</div>
</div>
</div>
<div class="card mb-4 z-index-2 draggable">
<div class="card-header pb-0">
<h6 class="mb-1">Market Distribution</h6>
</div>
<div class="card-body card-body px-3 pt-lg-6 pb-lg-5">
<div class="row h-100">
<div class="col-lg-5 my-auto text-center d-lg-block d-flex justify-content-center">
<div id="chart-pie" class="chart-pie">
</div>
</div>
</div>
</div>
</div>
Chart Line
Chart Lines

<div class="card mb-4 draggable">
<div class="card-header pb-0 d-flex align-items-center">
<div>
<h6 class="mb-1">Sales overview</h6>
<p class="text-sm mb-0">
(+32%) more in 2021
</p>
</div>
<select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example">
<option selected>2021</option>
<option value="2020">2020</option>
</select>
</div>
<div class="card-body p-3">
<div class="chart">
<canvas class="chart-line" class="chart-canvas" height="300"></canvas>
</div>
</div>
</div>
<div class="card mb-4 draggable">
<div class="card-header pb-0 d-flex align-items-center">
<div>
<h6 class="mb-1">Sales overview</h6>
<p class="text-sm mb-0">
(+32%) more in 2021
</p>
</div>
<select class="form-select form-select-sm ms-auto w-20 font-weight-bolder bg-gray-100" aria-label=".form-select-sm example">
<option selected>2021</option>
<option value="2020">2020</option>
</select>
</div>
<div class="card-body p-3">
<div class="chart">
<canvas class="chart-line" class="chart-canvas" height="300"></canvas>
</div>
</div>
</div>