Conner's Class

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart Example</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myPieChart" width="400" height="400"></canvas>
<script>
const ctx = document.getElementById('myPieChart').getContext('2d');
const myPieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Red', 'Blue', 'Pink', 'Yellow', 'Black'],
datasets: [{
data: [20, 30, 10, 30, 10],
backgroundColor: [
'rgba(255, 99, 132, 0.7)', // Red
'rgba(54, 162, 235, 0.7)', // Blue
'rgba(255, 192, 203, 0.7)', // Pink
'rgba(255, 206, 86, 0.7)', // Yellow
'rgba(0, 0, 0, 0.7)' // Black
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 192, 203, 1)',
'rgba(255, 206, 86, 1)',
'rgba(0, 0, 0, 1)'
],
borderWidth: 1
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
enabled: true,
},
}
}
});
</script>
</body>
</html>