HTML Code

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="utf-8">

  <title>SVG Polyline — chart</title>

</head>

<body>

  <h1>SVG &lt;polyline&gt; — chart with data points</h1>

  <svg width="260" height="160" role="img" aria-label="Line chart with circles at data points">

    <polyline points="30,120 70,90 110,100 150,50 190,70 230,30"

              fill="none" stroke="#2563eb" stroke-width="2" />

    <circle cx="30" cy="120" r="4" fill="#2563eb" />

    <circle cx="70" cy="90" r="4" fill="#2563eb" />

    <circle cx="110" cy="100" r="4" fill="#2563eb" />

    <circle cx="150" cy="50" r="4" fill="#2563eb" />

    <circle cx="190" cy="70" r="4" fill="#2563eb" />

    <circle cx="230" cy="30" r="4" fill="#2563eb" />

  </svg>

</body>

</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

SVG Polyline — chart with data points (Try It)