Doughnut Chart Maker

Data:

// Get the canvas element and context const canvas = document.getElementById('chart'); const ctx = canvas.getContext('2d'); // Set the initial chart data let data = [20, 30, 50]; // Initialize the chart options const options = { cutoutPercentage: 50, animation: { animateRotate: true, animateScale: false } }; // Create a new doughnut chart with the initial data and options const chart = new Chart(ctx, { type: 'doughnut', data: { datasets: [{ data: data, backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56'] }] }, options: options }); // Add an event listener to the update button to update the chart data const updateBtn = document.getElementById('update-btn'); updateBtn.addEventListener('click', () => { // Parse the input data and update the chart const newData = document.getElementById('data-input').value.split(',').map(Number); chart.data.datasets[0].data = newData; chart.update(); });