@@include('./partial/head.html', {
	"title": "Chart.js",
	"css": [
]})
	<!-- BEGIN #app -->
	<div id="app" class="app">
		@@include('./partial/header.html')
		
		@@include('./partial/sidebar.html', {"chartsClass": "active", "chartJsClass": "active"})
		
		<!-- BEGIN #content -->
		<div id="content" class="app-content">
			<!-- BEGIN container -->
			<div class="container">
				<!-- BEGIN row -->
				<div class="row justify-content-center">
					<!-- BEGIN col-10 -->
					<div class="col-xl-10">
						<!-- BEGIN row -->
						<div class="row">
							<!-- BEGIN col-9 -->
							<div class="col-xl-9">
								<ul class="breadcrumb">
									<li class="breadcrumb-item"><a href="#">Charts</a></li>
									<li class="breadcrumb-item active">Chart.js</li>
								</ul>
								
								<h1 class="page-header">
									Chart.js <small>page header description goes here...</small>
								</h1>
								
								<hr class="mb-4">
								
								<!-- BEGIN #chartJs -->
								<div id="chartJs">
									<h4>Basic Example</h4>
									<p>Chart.js is a simple yet flexible JavaScript charting for designers & developers. Please read the <a href="https://www.chartjs.org/" target="_blank">official documentation</a> for the full list of options.</p>
								</div>
								<!-- END #chartJs -->
								
								<!-- BEGIN #chartJsLineChart -->
								<div id="chartJsLineChart" class="mb-5">
									<div class="card">
										<div class="card-body">
											<h6 class="mb-3">Line Chart</h6>
											<canvas id="lineChart"></canvas>
										</div>
										<div class="hljs-container">
											<pre><code data-url="assets/data/chart-js/code-1.json"></code></pre>
										</div>
									</div>
								</div>
								<!-- END #chartJsLineChart -->
								
								<!-- BEGIN #chartJsBarChart -->
								<div id="chartJsBarChart" class="mb-5">
									<div class="card">
										<div class="card-body">
											<h6 class="mb-3">Bar Chart</h6>
											<canvas id="barChart"></canvas>
										</div>
										<div class="hljs-container">
											<pre><code data-url="assets/data/chart-js/code-2.json"></code></pre>
										</div>
									</div>
								</div>
								<!-- END #chartJsBarChart -->
								
								<!-- BEGIN #chartJsRadarChart -->
								<div id="chartJsRadarChart" class="mb-5">
									<div class="card">
										<div class="card-body">
											<h6 class="mb-3">Radar Chart</h6>
											<canvas id="radarChart"></canvas>
										</div>
										<div class="hljs-container">
											<pre><code data-url="assets/data/chart-js/code-3.json"></code></pre>
										</div>
									</div>
								</div>
								<!-- END #chartJsRadarChart -->
								
								<!-- BEGIN #chartJsPolarAreaChart -->
								<div id="chartJsPolarAreaChart" class="mb-5">
									<div class="card">
										<div class="card-body">
											<h6 class="mb-3">Polar Area Chart</h6>
											<div class="h-300px w-300px mx-auto">
												<canvas id="polarAreaChart"></canvas>
											</div>
										</div>
										<div class="hljs-container">
											<pre><code data-url="assets/data/chart-js/code-4.json"></code></pre>
										</div>
									</div>
								</div>
								<!-- END #chartJsPolarAreaChart -->
								
								<!-- BEGIN #chartJsPieChart -->
								<div id="chartJsPieChart" class="mb-5">
									<div class="card">
										<div class="card-body">
											<h6 class="mb-3">Pie Chart</h6>
											<div class="h-300px w-300px mx-auto">
												<canvas id="pieChart"></canvas>
											</div>
										</div>
										<div class="hljs-container">
											<pre><code data-url="assets/data/chart-js/code-5.json"></code></pre>
										</div>
									</div>
								</div>
								<!-- END #chartJsPieChart -->
								
								<!-- BEGIN #chartJsDoughnutChart -->
								<div id="chartJsDoughnutChart" class="mb-5">
									<div class="card">
										<div class="card-body">
											<h6 class="mb-3">Doughnut Chart</h6>
											<div class="h-300px w-300px mx-auto">
												<canvas id="doughnutChart"></canvas>
											</div>
										</div>
										<div class="hljs-container">
											<pre><code data-url="assets/data/chart-js/code-6.json"></code></pre>
										</div>
									</div>
								</div>
								<!-- END #chartJsDoughnutChart -->
							</div>
							<!-- END col-9-->
							<!-- BEGIN col-3 -->
							<div class="col-xl-3">
								<!-- BEGIN #sidebar-bootstrap -->
								<nav id="sidebar-bootstrap" class="navbar navbar-sticky d-none d-xl-block">
									<nav class="nav">
										<a class="nav-link" href="#chartJs" data-toggle="scroll-to">Chart.js</a>
										<a class="nav-link" href="#chartJsLineChart" data-toggle="scroll-to"> - line chart</a>
										<a class="nav-link" href="#chartJsBarChart" data-toggle="scroll-to"> - bar chart</a>
										<a class="nav-link" href="#chartJsRadarChart" data-toggle="scroll-to"> - radar chart</a>
										<a class="nav-link" href="#chartJsPolarAreaChart" data-toggle="scroll-to"> - polar area chart</a>
										<a class="nav-link" href="#chartJsPieChart" data-toggle="scroll-to"> - pie chart</a>
										<a class="nav-link" href="#chartJsDoughnutChart" data-toggle="scroll-to"> - doughnut chart</a>
									</nav>
								</nav>
								<!-- END #sidebar-bootstrap -->
							</div>
							<!-- END col-3 -->
						</div>
						<!-- END row -->
					</div>
					<!-- END col-10 -->
				</div>
				<!-- END row -->
			</div>
			<!-- END container -->
		</div>
		<!-- END #content -->
		
		@@include('./partial/scroll-top-btn.html')
		@@include('./partial/theme-panel.html')
	</div>
	<!-- END #app -->
	
@@include('./partial/script.html', {"script": [
	"assets/plugins/@highlightjs/cdn-assets/highlight.min.js",
	"assets/js/demo/highlightjs.demo.js",
	"assets/plugins/chart.js/dist/chart.umd.js",
	"assets/js/demo/chart-js.demo.js",
	"assets/js/demo/sidebar-scrollspy.demo.js"
]})