Chart Widgets
Single Bar Chart
A bar chart provides a way of showing data values represented as vertical bars.
Active Users
How do your users visited in the time.
Monthly
9.28K
4.63%
Weekly
2.69K
1.92%
Daily (Avg)
0.94K
3.45%
01 Jan, 2020
30 Jan, 2020
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="card-title-group align-start pb-3 g-2">
<div class="card-title">
<h6 class="title">Active Users</h6>
<p>How do your users visited in the time.</p>
</div>
<div class="card-tools">
<em class="card-hint icon ni ni-help" data-toggle="tooltip" data-bs-placement="left" title="Users of this month"></em>
</div>
</div>
<div class="analytic-au">
<div class="analytic-data-group analytic-au-group g-3">
<div class="analytic-data analytic-au-data">
<div class="title">Monthly</div>
<div class="amount">9.28K</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>4.63%</div>
</div>
<div class="analytic-data analytic-au-data">
<div class="title">Weekly</div>
<div class="amount">2.69K</div>
<div class="change down"><em class="icon ni ni-arrow-long-down"></em>1.92%</div>
</div>
<div class="analytic-data analytic-au-data">
<div class="title">Daily (Avg)</div>
<div class="amount">0.94K</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>3.45%</div>
</div>
</div>
<div class="analytic-au-ck">
<canvas class="analytics-au-chart" id="analyticAuData"></canvas>
</div>
<div class="chart-label-group">
<div class="chart-label">01 Jan, 2020</div>
<div class="chart-label">30 Jan, 2020</div>
</div>
</div>
</div>
</div><!-- .card -->
Multiple Bar Chart
A bar chart provides a way of comparison of multiple data sets side by side.
Orders Overview
In last 15 days buy and sells overview. Detailed Stats
12,954.63 USD
Last month 39,485 USD
Buy Orders
12,954.63 USD
Last month 39,485 USD
Sell Orders
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="card-title-group align-start mb-3">
<div class="card-title">
<h6 class="title">Orders Overview</h6>
<p>In last 15 days buy and sells overview. <a href="#" class="link link-sm">Detailed Stats</a></p>
</div>
<div class="card-tools mt-n1 me-n1">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#" class="active"><span>15 Days</span></a></li>
<li><a href="#"><span>30 Days</span></a></li>
<li><a href="#"><span>3 Months</span></a></li>
</ul>
</div>
</div>
</div>
</div><!-- .card-title-group -->
<div class="nk-order-ovwg">
<div class="row g-4 align-end">
<div class="col-xxl-8">
<div class="nk-order-ovwg-ck">
<canvas class="order-overview-chart" id="orderOverview"></canvas>
</div>
</div><!-- .col -->
<div class="col-xxl-4">
<div class="row g-4">
<div class="col-sm-6 col-xxl-12">
<div class="nk-order-ovwg-data buy">
<div class="amount">12,954.63 <small class="currenct currency-usd">USD</small></div>
<div class="info">Last month <strong>39,485 <span class="currenct currency-usd">USD</span></strong></div>
<div class="title"><em class="icon ni ni-arrow-down-left"></em> Buy Orders</div>
</div>
</div>
<div class="col-sm-6 col-xxl-12">
<div class="nk-order-ovwg-data sell">
<div class="amount">12,954.63 <small class="currenct currency-usd">USD</small></div>
<div class="info">Last month <strong>39,485 <span class="currenct currency-usd">USD</span></strong></div>
<div class="title"><em class="icon ni ni-arrow-up-left"></em> Sell Orders</div>
</div>
</div>
</div>
</div><!-- .col -->
</div>
</div><!-- .nk-order-ovwg -->
</div><!-- .card-inner -->
</div><!-- .card -->
Stacked Bar Chart
A bar chart provides a way of comparison of multiple data with stacked view.
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="card-title-group align-start mb-3">
<div class="card-title">
<h6 class="title">User Activities</h6>
<p>In last 30 days <em class="icon ni ni-info" data-toggle="tooltip" data-bs-placement="right" title="Referral Informations"></em></p>
</div>
<div class="card-tools mt-n1 me-n1">
<div class="drodown">
<a href="#" class="dropdown-toggle btn btn-icon btn-trigger" data-toggle="dropdown"><em class="icon ni ni-more-h"></em></a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>15 Days</span></a></li>
<li><a href="#" class="active"><span>30 Days</span></a></li>
<li><a href="#"><span>3 Months</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="user-activity-group g-4">
<div class="user-activity">
<em class="icon ni ni-users"></em>
<div class="info">
<span class="amount">345</span>
<span class="title">Direct Join</span>
</div>
<div class="gfx" data-color="#9cabff">
<svg enable-background="new 0 0 48 17.5" version="1.1" viewBox="0 0 48 17.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="m1.2 17.4h-0.3c-0.5-0.1-0.8-0.7-0.7-1.2 2-7.2 5-12.2 8.8-14.7 1.5-1 3-1.5 4.5-1.4 4.9 0.3 7.2 4.9 9 8.5 0.3 0.4 0.5 0.8 0.7 1.2 1 1.8 2.7 3.9 4.5 4.3 0.9 0.2 1.7-0.1 2.6-0.8 1.8-1.4 3-3.7 4.1-5.9 0.5-1 1-1.9 1.5-2.9 1-1.5 2.8-3.5 4.9-3.8 1.1-0.1 2.2 0.3 3.1 1 1.3 1.1 1.9 2.6 2.4 4.1 0.4 1 0.7 1.9 1.2 2.6 0.3 0.4 0.2 1.1-0.2 1.4s-1.1 0.2-1.4-0.2c-0.7-0.9-1.1-2-1.5-3-0.5-1.3-1-2.5-1.9-3.3-0.5-0.4-1-0.6-1.5-0.5-1.3 0.2-2.7 1.6-3.5 2.8-0.5 0.8-1 1.8-1.4 2.7-1.2 2.4-2.4 4.9-4.6 6.5-1.3 1.1-2.8 1.5-4.2 1.2-3.1-0.6-5.1-3.9-5.9-5.3-0.2-0.4-0.4-0.8-0.6-1.3-1.7-3.4-3.5-7.2-7.3-7.4-1.1-0.1-2.1 0.3-3.3 1-3.5 2.4-6.2 7-8 13.7-0.2 0.4-0.6 0.7-1 0.7z"/>
</svg>
</div>
</div>
<div class="user-activity">
<em class="icon ni ni-users"></em>
<div class="info">
<span class="amount">49</span>
<span class="title">Referral Join</span>
</div>
<div class="gfx" data-color="#ccd4ff">
<svg enable-background="new 0 0 48 17.5" version="1.1" viewBox="0 0 48 17.5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
<path fill="currentColor" d="m1.2 17.4h-0.3c-0.5-0.1-0.8-0.7-0.7-1.2 2-7.2 5-12.2 8.8-14.7 1.5-1 3-1.5 4.5-1.4 4.9 0.3 7.2 4.9 9 8.5 0.3 0.4 0.5 0.8 0.7 1.2 1 1.8 2.7 3.9 4.5 4.3 0.9 0.2 1.7-0.1 2.6-0.8 1.8-1.4 3-3.7 4.1-5.9 0.5-1 1-1.9 1.5-2.9 1-1.5 2.8-3.5 4.9-3.8 1.1-0.1 2.2 0.3 3.1 1 1.3 1.1 1.9 2.6 2.4 4.1 0.4 1 0.7 1.9 1.2 2.6 0.3 0.4 0.2 1.1-0.2 1.4s-1.1 0.2-1.4-0.2c-0.7-0.9-1.1-2-1.5-3-0.5-1.3-1-2.5-1.9-3.3-0.5-0.4-1-0.6-1.5-0.5-1.3 0.2-2.7 1.6-3.5 2.8-0.5 0.8-1 1.8-1.4 2.7-1.2 2.4-2.4 4.9-4.6 6.5-1.3 1.1-2.8 1.5-4.2 1.2-3.1-0.6-5.1-3.9-5.9-5.3-0.2-0.4-0.4-0.8-0.6-1.3-1.7-3.4-3.5-7.2-7.3-7.4-1.1-0.1-2.1 0.3-3.3 1-3.5 2.4-6.2 7-8 13.7-0.2 0.4-0.6 0.7-1 0.7z"/>
</svg>
</div>
</div>
</div>
</div>
<div class="user-activity-ck">
<canvas class="usera-activity-chart" id="userActivity"></canvas>
</div>
</div><!-- .card -->
Solid Line Chart
A line chart is a way of plotting data points on a line.
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="card-title-group align-start gx-3 mb-3">
<div class="card-title">
<h6 class="title">Sales Overview</h6>
<p>In 30 days sales of product subscription. <a href="#">See Details</a></p>
</div>
<div class="card-tools">
<div class="dropdown">
<a href="#" class="btn btn-primary btn-dim d-none d-sm-inline-flex" data-toggle="dropdown"><em class="icon ni ni-download-cloud"></em><span><span class="d-none d-md-inline">Download</span> Report</span></a>
<a href="#" class="btn btn-icon btn-primary btn-dim d-sm-none" data-toggle="dropdown"><em class="icon ni ni-download-cloud"></em></a>
<div class="dropdown-menu dropdown-menu-end">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>Download Mini Version</span></a></li>
<li><a href="#"><span>Download Full Version</span></a></li>
<li class="divider"></li>
<li><a href="#"><em class="icon ni ni-opt-alt"></em><span>More Options</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="nk-sale-data-group align-center justify-between gy-3 gx-5">
<div class="nk-sale-data">
<span class="amount">$82,944.60</span>
</div>
<div class="nk-sale-data">
<span class="amount sm">1,937 <small>Subscribers</small></span>
</div>
</div>
<div class="nk-sales-ck large pt-4">
<canvas class="sales-overview-chart" id="salesOverview"></canvas>
</div>
</div>
</div><!-- .card -->
Solid Line Chart
A line chart is a way of plotting data points on a line. Often, it is used to show trend data, or the comparison of two data sets.
Audience Overview
How have your users, sessions, bounce rate metrics trended.
Users
2.57K
12.37%
Sessions
3.98K
47.74%
Users
28.49%
12.37%
Users
7m 28s
0.35%
01 Jan, 2020
15 Jan, 2020
30 Jan, 2020
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="card-title-group pb-3 g-2">
<div class="card-title">
<h6 class="title">Audience Overview</h6>
<p>How have your users, sessions, bounce rate metrics trended.</p>
</div>
<div class="card-tools shrink-0 d-none d-sm-block">
<ul class="nav nav-switch-s2 nav-tabs bg-white">
<li class="nav-item"><a href="#" class="nav-link">7 D</a></li>
<li class="nav-item"><a href="#" class="nav-link active">1 M</a></li>
<li class="nav-item"><a href="#" class="nav-link">3 M</a></li>
</ul>
</div>
</div>
<div class="analytic-ov">
<div class="analytic-data-group analytic-ov-group g-3">
<div class="analytic-data analytic-ov-data">
<div class="title">Users</div>
<div class="amount">2.57K</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>12.37%</div>
</div>
<div class="analytic-data analytic-ov-data">
<div class="title">Sessions</div>
<div class="amount">3.98K</div>
<div class="change up"><em class="icon ni ni-arrow-long-up"></em>47.74%</div>
</div>
<div class="analytic-data analytic-ov-data">
<div class="title">Users</div>
<div class="amount">28.49%</div>
<div class="change down"><em class="icon ni ni-arrow-long-down"></em>12.37%</div>
</div>
<div class="analytic-data analytic-ov-data">
<div class="title">Users</div>
<div class="amount">7m 28s</div>
<div class="change down"><em class="icon ni ni-arrow-long-down"></em>0.35%</div>
</div>
</div>
<div class="analytic-ov-ck">
<canvas class="analytics-line-large" id="analyticOvData"></canvas>
</div>
<div class="chart-label-group ms-5">
<div class="chart-label">01 Jan, 2020</div>
<div class="chart-label d-none d-sm-block">15 Jan, 2020</div>
<div class="chart-label">30 Jan, 2020</div>
</div>
</div>
</div>
</div><!-- .card -->
Multiple Line Chart
A line chart is a way of plotting data points on a line.
Traffic Channel
Top traffic channels metrics.
Channel
Sessions
Prev Sessions
Change
Trend
Organic Search
4,305
4,129
4.29%
Social Media
859
936
15.8%
Referrals
482
793
41.3%
Others
138
97
12.6%
Code Example
<div class="card card-bordered">
<div class="card-inner mb-n2">
<div class="card-title-group">
<div class="card-title">
<h6 class="title">Traffic Channel</h6>
<p>Top traffic channels metrics.</p>
</div>
<div class="card-tools">
<div class="drodown">
<a href="#" class="dropdown-toggle dropdown-indicator btn btn-sm btn-outline-light btn-white" data-toggle="dropdown">30 Days</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 Days</span></a></li>
<li><a href="#"><span>15 Days</span></a></li>
<li><a href="#"><span>30 Days</span></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="nk-tb-list is-loose traffic-channel-table">
<div class="nk-tb-item nk-tb-head">
<div class="nk-tb-col nk-tb-channel"><span>Channel</span></div>
<div class="nk-tb-col nk-tb-sessions"><span>Sessions</span></div>
<div class="nk-tb-col nk-tb-prev-sessions"><span>Prev Sessions</span></div>
<div class="nk-tb-col nk-tb-change"><span>Change</span></div>
<div class="nk-tb-col nk-tb-trend tb-col-sm text-end"><span>Trend</span></div>
</div><!-- .nk-tb-head -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">Organic Search</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>4,305</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>4,129</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>4.29%</span> <span class="change up"><em class="icon ni ni-arrow-long-up"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="OrganicSearchData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">Social Media</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>859</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>936</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>15.8%</span> <span class="change down"><em class="icon ni ni-arrow-long-down"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="SocialMediaData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">Referrals</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>482</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>793</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>41.3%</span> <span class="change down"><em class="icon ni ni-arrow-long-down"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="ReferralsData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
<div class="nk-tb-item">
<div class="nk-tb-col nk-tb-channel">
<span class="tb-lead">Others</span>
</div>
<div class="nk-tb-col nk-tb-sessions">
<span class="tb-sub tb-amount"><span>138</span></span>
</div>
<div class="nk-tb-col nk-tb-prev-sessions">
<span class="tb-sub tb-amount"><span>97</span></span>
</div>
<div class="nk-tb-col nk-tb-change">
<span class="tb-sub"><span>12.6%</span> <span class="change up"><em class="icon ni ni-arrow-long-up"></em></span></span>
</div>
<div class="nk-tb-col nk-tb-trend text-end">
<div class="traffic-channel-ck ms-auto">
<canvas class="analytics-line-small" id="OthersData"></canvas>
</div>
</div>
</div><!-- .nk-tb-item -->
</div><!-- .nk-tb-list -->
</div><!-- .card -->
Donught Charts
Dughnut charts are probably the most commonly used charts. It use to show relational proportions between data.
Traffic Channel
Organic Search
4,305 58.63%
Social Media
859 23.94%
Referrals
482 12.94%
Others
138 4.49%
Code Example
<div class="card card-bordered">
<div class="card-inner">
<div class="card-title-group">
<div class="card-title card-title-sm">
<h6 class="title">Traffic Channel</h6>
</div>
<div class="card-tools">
<div class="drodown">
<a href="#" class="dropdown-toggle dropdown-indicator btn btn-sm btn-outline-light btn-white" data-toggle="dropdown">30 Days</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 Days</span></a></li>
<li><a href="#"><span>15 Days</span></a></li>
<li><a href="#"><span>30 Days</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="traffic-channel">
<div class="traffic-channel-doughnut-ck">
<canvas class="analytics-doughnut" id="TrafficChannelDoughnutData"></canvas>
</div>
<div class="traffic-channel-group g-2">
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#9cabff"></span><span>Organic Search</span></div>
<div class="amount">4,305 <small>58.63%</small></div>
</div>
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#b8acff"></span><span>Social Media</span></div>
<div class="amount">859 <small>23.94%</small></div>
</div>
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#ffa9ce"></span><span>Referrals</span></div>
<div class="amount">482 <small>12.94%</small></div>
</div>
<div class="traffic-channel-data">
<div class="title"><span class="dot dot-lg sq" data-bg="#f9db7b"></span><span>Others</span></div>
<div class="amount">138 <small>4.49%</small></div>
</div>
</div><!-- .traffic-channel-group -->
</div><!-- .traffic-channel -->
</div>
</div><!-- .card -->
Donught Charts with icons
Dughnut charts are probably the most commonly used charts. It use to show relational proportions between data.
Sessions by Device
Desktop
84.5%
4.5%
Mobile
14.2%
133.2%
Tablet
1.3%
25.3%
Code Example
<div class="card card-bordered">
<div class="card-inner stretch flex-column">
<div class="card-title-group">
<div class="card-title card-title-sm">
<h6 class="title">Sessions by Device</h6>
</div>
<div class="card-tools">
<div class="drodown">
<a href="#" class="dropdown-toggle dropdown-indicator btn btn-sm btn-outline-light btn-white" data-toggle="dropdown">30 Days</a>
<div class="dropdown-menu dropdown-menu-end dropdown-menu-xs">
<ul class="link-list-opt no-bdr">
<li><a href="#"><span>7 Days</span></a></li>
<li><a href="#"><span>15 Days</span></a></li>
<li><a href="#"><span>30 Days</span></a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="device-status my-auto">
<div class="device-status-ck">
<canvas class="analytics-doughnut" id="deviceStatusData"></canvas>
</div>
<div class="device-status-group">
<div class="device-status-data">
<em data-color="#798bff" class="icon ni ni-monitor"></em>
<div class="title">Desktop</div>
<div class="amount">84.5%</div>
<div class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>4.5%</div>
</div>
<div class="device-status-data">
<em data-color="#baaeff" class="icon ni ni-mobile"></em>
<div class="title">Mobile</div>
<div class="amount">14.2%</div>
<div class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>133.2%</div>
</div>
<div class="device-status-data">
<em data-color="#7de1f8" class="icon ni ni-tablet"></em>
<div class="title">Tablet</div>
<div class="amount">1.3%</div>
<div class="change up text-danger"><em class="icon ni ni-arrow-long-up"></em>25.3%</div>
</div>
</div><!-- .device-status-group -->
</div><!-- .device-status -->
</div>
</div><!-- .card -->
