CodePen Embed - gráfico con svg

    <svg id="ejeCordenadas">
  
      <text x="280" y="230"> X</text>
      <text x="20" y="50" id="contadorY">Y</text>
      <text x="10" y="70" style="font-size: 8px">
            <tspan x="70" y="10">10</tspan>
            <tspan x="70" y="20">20</tspan>
            <tspan x="70" y="30">30</tspan>
            <tspan x="70" y="40">40</tspan>
            <tspan x="70" y="50">50</tspan>
            <tspan x="70" y="60">60</tspan>
            <tspan x="70" y="70">70</tspan>
            <tspan x="70" y="80">80</tspan>
            <tspan x="70" y="90">90</tspan>
            <tspan x="70" y="100">100</tspan>
            <tspan x="70" y="110">110</tspan>
            <tspan x="70" y="120">120</tspan>
            <tspan x="70" y="130">130</tspan>
            <tspan x="70" y="140">140</tspan>
            <tspan x="70" y="150">150</tspan>
            <tspan x="70" y="160">160</tspan>
            <tspan x="70" y="170">170</tspan>
            <tspan x="70" y="180">180</tspan>
      </text>
            <text x="90" y="190" style="font-size: 8px;writing-mode: vertical-lr; stroke:red;">
            <tspan x="90"  y="185">0</tspan>
            <tspan x="100"  y="185">10</tspan>
            <tspan x="110" y="185">20</tspan>
            <tspan x="120" y="185">30</tspan>
            <tspan x="130" y="185">40</tspan>
            <tspan x="140" y="185">50</tspan>
            <tspan x="150" y="185">60</tspan>
            <tspan x="160" y="185">70</tspan>
            <tspan x="170" y="185">80</tspan>
            <tspan x="180" y="185">90</tspan>
            <tspan x="190" y="185">100</tspan>
            <tspan x="200" y="185">110</tspan>
            <tspan x="210" y="185">120</tspan>
            <tspan x="220" y="185">130</tspan>
            <tspan x="230" y="185">140</tspan>
            <tspan x="240" y="185">150</tspan>
            <tspan x="250" y="185">160</tspan>
            <tspan x="260" y="185">170</tspan>
            <tspan x="270" y="185">180</tspan>
      </text>

      <text x="280" y="40" class="position"> x = 173  y = 40</text>
      <line x1="90" y1="175" x2="400" y2="175"></line>
      <line x1="90" y1="177"  x2="90" y2="2"></line>
      <polyline points="92,40  263,40 263,173 " />
        <circle cx="263" cy="40" r="4" fill="cyan">
    </svg>

#ejeCordenadas{
  background: black;
  width:500px;
  height: 250px;
  margin-left: 10%;
  margin-top:30px;

}
#ejeCordenadas text{
  fill:whitesmoke;
  font-size:50px;
  stroke:grey;
}
#ejeCordenadas line{
  stroke:aquamarine;
  stroke-width:5px;
}

#ejeCordenadas polyline{
  stroke:red;
  stroke-width:3px;
  stroke-dasharray: 6px;
}
svg .position{
  fill:magenta!important;
  stroke:magenta!important;
  font-size: 1em!important;
}

This Pen is owned by CVDGP on CodePen.

See more by @cvdgp on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.