Doughnut Chart Maker Tool
Doughnut Chart Maker Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
width: 90%;
max-width: 800px;
margin: auto;
}
.title {
font-size: 2.5rem;
margin-bottom: 20px;
}
.inputs {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 30px;
}
.input-group {
margin-bottom: 15px;
text-align: left;
}
.input-group label {
font-size: 1.1rem;
margin-bottom: 5px;
display: block;
}
.input-group input {
width: 100%;
padding: 10px;
font-size: 1rem;
border: 1px solid #ddd;
border-radius: 5px;
}
.btn {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
font-size: 1.2rem;
border: none;
border-radius: 5px;
cursor: pointer;
}
.btn:hover {
background-color: #45a049;
}
.chart-container {
width: 100%;
max-width: 500px;
margin: auto;
}
canvas {
width: 100%;
height: auto;
}
document.getElementById('generateChart').addEventListener('click', function() {
// Get input values
const labelsInput = document.getElementById('labels').value;
const valuesInput = document.getElementById('values').value;
const colorsInput = document.getElementById('colors').value;
// Validate inputs
if (!labelsInput || !valuesInput || !colorsInput) {
alert('Please fill in all fields!');
return;
}
// Split the inputs into arrays
const labels = labelsInput.split(',').map(item => item.trim());
const values = valuesInput.split(',').map(item => parseFloat(item.trim()));
const colors = colorsInput.split(',').map(item => item.trim());
// Check if lengths of arrays match
if (labels.length !== values.length || labels.length !== colors.length) {
alert('The number of labels, values, and colors must be the same.');
return;
}
// Create the chart
const ctx = document.getElementById('myDoughnutChart').getContext('2d');
const myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: values,
backgroundColor: colors,
borderWidth: 1,
hoverOffset: 4
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
tooltip: {
callbacks: {
label: function(tooltipItem) {
return `${tooltipItem.label}: ${tooltipItem.raw}`;
}
}
}
}
}
});
});
