JSFiddle - React, Tailwind, and code Playground

HTML

<svg width="100%" height="100%" viewBox="0 0 500 500">
  <defs>
    <text id="label1" font-size="16" transform="scale(1,-1)"> 10% </text>
    <text id="label2" font-size="16" transform="scale(1,-1)"> 20% </text>
  </defs>
  <g id="cartesian" transform="translate(0,500) scale(1,-1)">
    <g class="data">
      <line x1="0%"  y1="75%" x2="50%"  y2="40%" ></line>
      <line x1="50%" y1="40%" x2="100%" y2="60%"></line>
    </g>
    <g class="y label">
        <use xlink:href="#label1" x="0%" y="50%"/>
        <use xlink:href="#label2" x="0%" y="90%"/>
    </g>
  </g>
</svg>

CSS

.grid {stroke: black; stroke-width: 1; stroke-dasharray: 1 2}
 .label{font-family: courier new; fill: black; font-size: 14px}
 .data {stroke: black; stroke-width: 1}