<div class="chart w-100">
	<canvas id="barChart" height="346px" style="width: 524px"></canvas>
</div>
{{#extend 'scripts'}}
<script type="text/javascript">
	new Chart(document.getElementById("barChart"), {
		type: 'bar',
		data: {
			labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"],
			datasets: [{
				label: "Earned",
				backgroundColor: "#5d92f4",
				data: [45, 32, 50, 42, 32, 46, 30, 25, 29, 21, 21, 25]
			}, {
				label: "Views",
				backgroundColor: "#E9ECEF",
				data: [10, 20, 12, 30, 10, 32, 28, 30, 20, 18, 18, 30]
			}]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			title: {
				display: true
			},
			scales: {
				yAxes: [{
					stacked: true,
					ticks: {
						display: false
					},
					gridLines: {
						display: false,
						drawBorder: false
					}
				}],
				xAxes: [{
					stacked: true,
					ticks: {
						padding: 10
					},
					barPercentage: 0.3,
					categoryPercentage: 1.5,
					gridLines: {
						display: false,
						drawBorder: false
					},
					display: true
				}]
			},
			legend: {
				display: false
			}
		}
	});

</script> {{/extend}}
