Search code examples
svgpolyline

SVG Polyline make Y points larger

Is there anyway to make the Y points on SVG larger. My Y points are on decimal gap. When you look it on browser it will just look like a straight line. 

<svg viewBox="0 0 500 100" class="chart">    
  <polyline fill="none" stroke="#0074d9" stroke-width="1"
      points="
        0,55.15
        110,55.43
        220,55.98
        330,56.01
        440,56.09
  "/>  
</svg>

Cheers!

1st Pic. Current when you run the svg in browser enter image description here

2nd Pic. What Im trying to achieve

enter image description here

Solution

  • Well - here's a solution that assumes a few things:

    • You want the y coordinates in your SVG to match your original data. If you want this, then you have to flip your drawing surface afterwards, because the 0,0 origin in SVG is top, left, not bottom, left as in most charts.
    • You don't care about indicating absolute scale and just want to indicate relative changes no matter how minor, and you don't care about the relative scale of X and Y axis.

    So, this adds a CSS transform that flips your line vertically, shrinks the viewBox so that the y axis is zoomed into the mid-fifties. And then squashes the resulting drawing into the drawing space by using preserveAspectRatio/meet (I didn't bother redoing your X axis, I just shrunk it to 10% by moving the decimal place.)

    #tooltip-flip{
  background: #DDD;
  transform-origin: 50%, 50%;
  transform: scaleY(-1);
}
    <svg id="tooltip-flip" viewBox="-0.25 54.7 4.8 1" width="500px" height="200px" preserveAspectRatio="xMinYMin meet">    
  <polyline fill="none" stroke="#0074d9" stroke-width="0.005"
      points="0,55.15 1.10,55.43 2.20,55.98 3.30,56.01 4.40,56.09"/>  
</svg>