<svg class="chart">
  <g class="x">
    <text x="0" y="100%" dy="10">0</text>
    <text x="20%" y="100%" dy="10">2</text>
    <text x="40%" y="100%" dy="10">4</text>
    <text x="60%" y="100%" dy="10">6</text>
    <text x="80%" y="100%" dy="10">8</text>
    <text x="100%" y="100%" dy="10">10</text>
  </g>
  <g class="y">
    <text dx="-10" y="100%">0</text>
    <text dx="-10" y="50%">50</text>
    <text dx="-10" y="0%">100</text>
  </g>
  <svg viewBox="0 0 100 100" preserveAspectRatio="none">
    <polyline
      points="0,100 10,99 20,96 30,91 40,84 50,75 60,64 70,51 80,36 90,19 100,0"
      style="stroke: red; stroke-width: 2;"
    ></polyline>
  </svg>
</svg>
body {
  height: 100vh;
  display: flex;
}

.chart {
  width: 50%;
  height: 50%;
  margin: auto;
  overflow: visible;
  border: 0 solid #000;
  border-width: 0 0 0.1rem 0.1rem;
}

polyline {
  fill: none;
}

svg * {
  vector-effect: non-scaling-stroke;
}

.x text {
  text-anchor: middle;
  dominant-baseline: hanging;
}

.y text {
  text-anchor: end;
  dominant-baseline: middle;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.