// Set new default font family and font color to mimic Bootstrap's default styling
Chart.defaults.global.defaultFontFamily = 'Nunito', '-apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif';
Chart.defaults.global.defaultFontColor = '#858796';

// Pie Chart Example
var ctx = document.getElementById("myPieChart");
var myPieChart = new Chart(ctx, {
	type: 'doughnut',
	data: {
		labels: ["Direct", "Referral", "Social", "SEO", "SEM"],
		datasets: [{
			data: [40, 30, 15, 25, 15],
			backgroundColor: ['#fd6585', '#3da3e8', '#51c0bf', '#fecc60', '#fd9e4b'],
			hoverBackgroundColor: ['#fc4d72', '#2098e9', '#2ab2b1', '#febd32', '#fe9132'],
			hoverBorderColor: "rgba(234, 236, 244, 1)",
		}],
	},
	options: {
		responsive: true,
		maintainAspectRatio: false,
		tooltips: {
			backgroundColor: "rgb(255,255,255)",
			bodyFontColor: "#858796",
			borderColor: '#dddfeb',
			borderWidth: 1,
			xPadding: 15,
			yPadding: 15,
			displayColors: false,
			caretPadding: 10,
		},
		legend: {
			display: false
		},
		cutoutPercentage: 80,
	},
});