<canvas id="polarAreaChart" width="445" height="245" style="display: block; width: 445px; height: 245px;"></canvas> 
{{#extend 'scripts'}}
<script type="text/javascript">
	new Chart(document.getElementById("polarAreaChart"), {
		data: {
			labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
			datasets: [{
					label: 'Series A',
					backgroundColor: hexToRgbA('#FFB70F', 0.2),
					borderColor: hexToRgbA('#FFB70F', 1),
					pointBackgroundColor: hexToRgbA('#FFB70F', 1),
					pointBorderColor: '#ffffff',
					pointHoverBackgroundColor: '#ffffff',
					pointHoverBorderColor: hexToRgbA('#FFB70F', 1),
					data: [65, 59, 90, 81, 56, 55, 40]
				},
				{
					label: 'Series B',
					backgroundColor: hexToRgbA('#FF3739', 0.2),
					borderColor: hexToRgbA('#FF3739', 1),
					pointBackgroundColor: hexToRgbA('#FF3739', 1),
					pointBorderColor: '#ffffff',
					pointHoverBackgroundColor: '#ffffff',
					pointHoverBorderColor: hexToRgbA('#FF3739', 1),
					data: [28, 48, 40, 19, 96, 27, 100]
				}
			],
		},
		type: 'polarArea',
		options: {
			legend: {
				display: false
			},
			responsive: true,
			maintainAspectRatio: false
		}
	});

</script>
{{/extend}}
