Doughnut Chart Maker Tool

Labels (comma separated):

Data (comma separated):

body { font-family: Arial, sans-serif; background-color: #f0f0f0; color: #333; margin: 0; padding: 0; } .container { max-width: 800px; margin: 20px auto; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); text-align: center; } h1 { color: #FF6384; } .form-container { margin-bottom: 20px; } .input-group { margin: 10px 0; } label { display: block; font-weight: bold; margin-bottom: 5px; } input { width: 100%; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 10px 20px; font-size: 16px; background-color: #FF6384; color: #fff; border: none; border-radius: 4px; cursor: pointer; } button:hover { background-color: #FF4C6A; } .chart-container { margin-top: 20px; } canvas { width: 100% !important; max-width: 100%; height: auto !important; } function drawChart() { const labels = document.getElementById('labels').value.split(',').map(label => label.trim()); const data = document.getElementById('data').value.split(',').map(value => parseFloat(value.trim())); if (labels.length !== data.length || labels.includes('') || data.includes(NaN)) { alert('Please ensure that labels and data are correctly formatted and matched.'); return; } const ctx = document.getElementById('doughnutChart').getContext('2d'); new Chart(ctx, { type: 'doughnut', data: { labels: labels, datasets: [{ label: 'Doughnut Chart', data: data, backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { responsive: true } }); }

Explanation

1. HTML:

   • Includes input fields for labels and data, and a button to draw the chart.
   • Contains a canvas element for rendering the doughnut chart.

2. CSS:

   • Styles the input fields, button, and chart container.
   • Provides a responsive and visually appealing design.

3. JavaScript:

   • drawChart function extracts labels and data from the input fields, validates them, and then uses Chart.js to draw the doughnut chart.
   • Configures the Chart.js chart with the provided data and labels, and styles the chart with colors and other settings.

This code provides a complete, responsive, and colorful Doughnut Chart Maker Tool. You can further customize it by adding more features or styling options as needed.