Line Graph Maker Tool

const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const width = canvas.width; const height = canvas.height; const padding = 30; const data = [10, 30, 45, 60, 80, 90, 70, 50, 30, 20]; // Draw x and y axis ctx.beginPath(); ctx.moveTo(padding, padding); ctx.lineTo(padding, height - padding); ctx.lineTo(width - padding, height - padding); ctx.stroke(); // Draw x and y axis labels ctx.font = '16px Arial'; ctx.fillText('X Axis', width / 2, height - padding / 2); ctx.save(); ctx.translate(padding / 2, height / 2); ctx.rotate(-Math.PI / 2); ctx.fillText('Y Axis', 0, 0); ctx.restore(); // Draw data points ctx.beginPath(); ctx.moveTo(padding, height - padding - data[0]); for (let i = 1; i < data.length; i++) { const x = i * (width - 2 * padding) / (data.length - 1) + padding; const y = height - padding - data[i]; ctx.lineTo(x, y); } ctx.stroke();