With the Help of this code you can make Pie chart tool, you can enter values and can draw pie charts in web, mobile applications, this code is written in Javascript, HTML and Css.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart Maker Tool</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background: #f7f9fc;
color: #333;
}
h1 {
margin: 20px 0;
color: #4a90e2;
}
.chart-container {
width: 90%;
max-width: 600px;
margin: 20px auto;
background: #ffffff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
padding: 20px;
}
.inputs {
margin-bottom: 20px;
}
.inputs input {
width: calc(50% - 10px);
padding: 10px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 5px;
}
.inputs button {
width: 100%;
padding: 10px;
background: #4a90e2;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background 0.3s ease;
}
.inputs button:hover {
background: #357ac9;
}
.chart {
margin-top: 20px;
}
.footer {
margin-top: 20px;
text-align: center;
font-size: 0.9rem;
color: #666;
}
@media (max-width: 600px) {
.inputs input {
width: 100%;
}
}
</style>
</head>
<body>
<h1>Pie Chart Maker Tool</h1>
<div class="chart-container">
<div class="inputs">
<input type="text" id="label" placeholder="Enter Label (e.g., Category 1)" />
<input type="number" id="value" placeholder="Enter Value (e.g., 50)" />
<button onclick="addData()">Add Data</button>
</div>
<canvas id="pieChart" class="chart"></canvas>
<button onclick="resetChart()" style="margin-top: 10px;">Reset Chart</button>
</div>
<div class="footer">
<p>Designed with ❤️ using HTML, CSS, and Chart.js</p>
</div>
<script>
const ctx = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(ctx, {
type: 'pie',
data: {
labels: [],
datasets: [{
data: [],
backgroundColor: [],
}],
},
options: {
responsive: true,
plugins: {
legend: {
position: 'top',
},
},
},
});
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function addData() {
const label = document.getElementById('label').value;
const value = document.getElementById('value').value;
if (label && value) {
pieChart.data.labels.push(label);
pieChart.data.datasets[0].data.push(parseFloat(value));
pieChart.data.datasets[0].backgroundColor.push(getRandomColor());
pieChart.update();
document.getElementById('label').value = '';
document.getElementById('value').value = '';
} else {
alert('Please enter both label and value.');
}
}
function resetChart() {
pieChart.data.labels = [];
pieChart.data.datasets[0].data = [];
pieChart.data.datasets[0].backgroundColor = [];
pieChart.update();
}
</script>
</body>
</html>