Pie Chart Maker Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f7fc;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 40px;
}
h1 {
font-size: 2.5rem;
color: #2c3e50;
}
input, button {
width: 100%;
padding: 12px;
margin: 10px 0;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 1rem;
}
button {
background-color: #3498db;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
.input-form {
width: 100%;
max-width: 600px;
margin: 0 auto;
}
.form-group {
margin-bottom: 20px;
}
.chart-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
canvas {
width: 100% !important;
height: 400px !important;
}
// Create the Pie chart on initial load
const ctx = document.getElementById('pieChart').getContext('2d');
let pieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: ['Sample Label 1', 'Sample Label 2', 'Sample Label 3'],
datasets: [{
data: [40, 30, 30],
backgroundColor: ['#e74c3c', '#f39c12', '#2ecc71'],
borderColor: '#fff',
borderWidth: 2
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return tooltipItem.label + ': ' + tooltipItem.raw + '%';
}
}
}
}
}
});
// Event listener for form submission
document.getElementById('chartForm').addEventListener('submit', function(e) {
e.preventDefault();
const labelsInput = document.getElementById('labels').value;
const valuesInput = document.getElementById('values').value;
const labels = labelsInput.split(',').map(label => label.trim());
const values = valuesInput.split(',').map(value => parseFloat(value.trim()));
// Validate inputs
if (labels.length !== values.length) {
alert('Please ensure the number of labels and values are equal.');
return;
}
// Update the pie chart
pieChart.data.labels = labels;
pieChart.data.datasets[0].data = values;
// Generate random colors for each segment
pieChart.data.datasets[0].backgroundColor = values.map(() => getRandomColor());
pieChart.update();
});
// Function to generate random colors for pie chart segments
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
