Chart Widgetst | DashLite Admin Template

Components

## 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">
        <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">
        <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.

###### User Activities

In last 30 days

345 Direct Join
49 Referral Join

###### Code Example

    <div class="card">
        <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.

###### Sales Overview

In 30 days sales of product subscription. See Details

Download Report
$82,944.60
1,937 Subscribers

###### Code Example

    <div class="card">
        <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">
        <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.

30 Days
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">
        <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

30 Days
Organic Search
4,305 58.63%
Social Media
859 23.94%
Referrals
482 12.94%
Others
138 4.49%

###### Code Example

    <div class="card">
        <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

30 Days
Desktop
84.5%
4.5%
Mobile
14.2%
133.2%
Tablet
1.3%
25.3%

###### Code Example

    <div class="card">
        <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 -->

##### Select Your Country

- Argentina
- Australia
- Bangladesh
- Canada (English)
- Centrafricaine
- China
- France
- Germany
- Iran
- Italy
- México
- Philippines
- Portugal
- South Africa
- Spain
- Switzerland
- United Kingdom
- United State