---
title: Charts
page-header: Charts
menu: base.charts
libs: apexcharts
---

<div class="row row-cards">
	<div class="col-6">
		<div class="card">
			<div class="card-body">
				<div class="d-flex">
					<h3 class="card-title">Active users</h3>
					<div class="ms-auto">
						{% include parts/dropdown/days.html %}
					</div>
				</div>

				<div class="row">
					<div class="col">
						{% include ui/chart.html chart-id="active-users-2" %}
					</div>
					<div class="col-md-auto">
						<div class="divide-y divide-y-fill">
							<div class="px-3">
								<div class="text-muted">
									<span class="status-dot bg-primary"></span> Mobile
								</div>
								<div class="h2">11,425</div>
							</div>
							<div class="px-3">
								<div class="text-muted">
									<span class="status-dot bg-azure"></span> Desktop
								</div>
								<div class="h2">6,458</div>
							</div>
							<div class="px-3">
								<div class="text-muted">
									<span class="status-dot bg-green"></span> Tablet
								</div>
								<div class="h2">3,985</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<div class="col-4">

	</div>

	<div class="col-12">
		<div class="card">
			<div class="card-body">
				<div class="d-flex">
					<h3 class="card-title">Social referrals</h3>
					<div class="ms-auto">
						{% include parts/dropdown/days.html %}
					</div>
				</div>
				{% include ui/chart.html chart-id="social-referrals" legend=true %}
			</div>
		</div>
	</div>

	<div class="col-12">
		<div class="card">
			<div class="card-body">
				{% include ui/chart.html chart-id="tasks-overview" height=20 %}
			</div>
		</div>
	</div>

	{% for chart in site.data.charts %}
	{% if chart[1].demo %}
	{% assign chart-id = chart[0] %}
	<div class="col-lg-6 col-xl-4">
		<div class="card">
			{% if chart[1].name %}
			<div class="card-header">
				<h3 class="card-title">{{ chart[1].name }}</h3>
			</div>
			{% endif %}
			<div class="card-body">
				{% include ui/chart.html chart-id=chart-id height=15 %}
			</div>
		</div>
	</div>
	{% endif %}
	{% endfor %}
</div>