Simple chart - SVG

by cillay

HTML

<svg width="500" height="150">
  <rect width="450" height="150" x="40" y="0" style="fill:transparent;stroke-width:1;stroke:rgb(0,0,0)"/>
  <rect width="300" height="30" x="40" y="0" style="fill:rgb(0,255,0);stroke-width:1;stroke:rgb(0,0,0)"/>
  <rect width="250" height="30" x="40" y="40" style="fill:rgb(255,0,0);stroke-width:1;stroke:rgb(0,0,0)"/>
  <rect width="330" height="30" x="40" y="80" style="fill:rgb(255,255,0);stroke-width:1;stroke:rgb(0,0,0)"/>
  <rect width="190" height="30" x="40" y="120" style="fill:rgb(255,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
    
  <text text-anchor="start" x="0" y="20" font-family="Arial" font-size="10" stroke="none" stroke-width="0" fill="#222222">Celery</text>
  <text text-anchor="start" x="0" y="60" font-family="Arial" font-size="10" stroke="none" stroke-width="0" fill="#222222">Apples</text>
  <text text-anchor="start" x="0" y="100" font-family="Arial" font-size="10" stroke="none" stroke-width="0" fill="#222222">Walnuts</text>
  <text text-anchor="start" x="0" y="140" font-family="Arial" font-size="10" stroke="none" stroke-width="0" fill="#222222">Grapes</text>
  Your browser does not support inline SVG.  
</svg>