Line Graph
Home
Snippets
Line Graph
HTML
CSS
JS
<h2>Simple Line Graph</h2> <canvas id="lineGraph" width="400" height="300"></canvas>
body { text-align: center; font-family: Arial, sans-serif; margin: 0; } canvas { border: 1px solid #ccc; margin-top: 20px; }
const canvas = document.getElementById("lineGraph"); const ctx = canvas.getContext("2d"); const data = [50, 100, 80, 120, 60, 150, 90]; const spacing = 50; ctx.beginPath(); ctx.moveTo(40, 10); ctx.lineTo(40, 250); ctx.lineTo(380, 250); ctx.strokeStyle = "#000"; ctx.stroke(); ctx.beginPath(); ctx.moveTo(40, 250 - data[0]); for (let i = 1; i < data.length; i++) { ctx.lineTo(40 + i * spacing, 250 - data[i]); } ctx.strokeStyle = "blue"; ctx.lineWidth = 2; ctx.stroke(); ctx.fillStyle = "red"; for (let i = 0; i < data.length; i++) { ctx.beginPath(); ctx.arc(40 + i * spacing, 250 - data[i], 4, 0, Math.PI * 2); ctx.fill(); }
Ad #1
Ad #2
Scroll to Top