<canvas id="lineChart" width="445" height="245"></canvas> 
{{#extend 'scripts'}}
<script type="text/javascript">
	new Chart(document.getElementById("lineChart"), {
		type: 'line',
		data: {
			labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
			datasets: [{
				label: 'Data One',
				fill: true,
				lineTension: 0.5,
				fillOpacity: 0.3,
				backgroundColor: '#ff3739',
				borderColor: "#ff3739",
				borderWidth: "2",
				pointBorderColor: "#ff3739",
				pointBackgroundColor: "#00d014",
				pointBorderWidth: 3,
				pointRadius: 2,
				pointHoverBackgroundColor: "#ff3739",
				pointHoverBorderColor: "#00d014",
				pointHoverBorderWidth: 4,
				pointHoverRadius: 7,
				data: [40, 39, 10, 40, 39, 80, 40]
			}]
		},
		options: {
			responsive: true,
			maintainAspectRatio: false,
			legend: {
				display: true
			},
			scales: {
				xAxes: [{
					display: true,
					ticks: {
						min: 0
					},
					gridLines: {
						display: true,
						drawBorder: false
					}
				}],
				yAxes: [{
					display: true,
					ticks: {
						suggestedMin: 0,
						beginAtZero: true
					}
				}]
			}
		}
	});

</script>
{{/extend}}
