Here is the Free Doughnut Chart Maker Tool Code, it will draw a doughnut chart after collecting values from user, you can use this tool for draw sales reports or any reports to see growth, this tool 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>Doughnut 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;
box-sizing: border-box;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
color: #333;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 20px;
}
.chart-container {
width: 100%;
max-width: 600px;
margin-bottom: 20px;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.form-container {
width: 100%;
max-width: 600px;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.form-group input {
width: calc(100% - 12px);
padding: 8px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
font-size: 14px;
}
.add-data-button {
display: inline-block;
margin: 10px 0;
padding: 10px 20px;
background: #34d399;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.add-data-button:hover {
background: #059669;
}
.generate-button {
display: block;
width: 100%;
margin: 20px 0;
padding: 10px 20px;
background: #2563eb;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 16px;
font-weight: bold;
transition: all 0.3s ease;
}
.generate-button:hover {
background: #1d4ed8;
}
.data-container {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="chart-container">
<canvas id="doughnutChart"></canvas>
</div>
<div class="form-container">
<h2>Add Data for Doughnut Chart</h2>
<div class="form-group">
<label for="label">Label</label>
<input type="text" id="label" placeholder="Enter label (e.g., Sales, Expenses)">
</div>
<div class="form-group">
<label for="value">Value</label>
<input type="number" id="value" placeholder="Enter value">
</div>
<button class="add-data-button" onclick="addData()">Add Data</button>
<div class="data-container" id="dataContainer"></div>
<button class="generate-button" onclick="generateChart()">Generate Chart</button>
</div>
</div>
<script>
let data = [];
let labels = [];
let chartInstance = null;
function addData() {
const labelInput = document.getElementById('label');
const valueInput = document.getElementById('value');
const label = labelInput.value.trim();
const value = parseFloat(valueInput.value);
if (label && !isNaN(value)) {
labels.push(label);
data.push(value);
labelInput.value = '';
valueInput.value = '';
updateDataContainer();
} else {
alert('Please provide valid label and value.');
}
}
function updateDataContainer() {
const dataContainer = document.getElementById('dataContainer');
dataContainer.innerHTML = '';
labels.forEach((label, index) => {
const dataItem = document.createElement('p');
dataItem.textContent = `${label}: ${data[index]}`;
dataContainer.appendChild(dataItem);
});
}
function generateChart() {
const ctx = document.getElementById('doughnutChart').getContext('2d');
if (chartInstance) {
chartInstance.destroy();
}
chartInstance = new Chart(ctx, {
type: 'doughnut',
data: {
labels: labels,
datasets: [{
data: data,
backgroundColor: [
'#f87171', '#fb923c', '#facc15', '#34d399', '#60a5fa', '#a78bfa', '#f472b6'
],
hoverOffset: 4
}]
},
options: {
responsive: true,
plugins: {
legend: {
position: 'bottom'
}
}
}
});
}
</script>
</body>
</html>