Prettified source for http://api.chartspree.com/bar.svg?Foo=1,1,2,3,6&_height=250px

bar.svg

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="" class="pygal-chart" viewBox="0 0 800 250">
   <!--Generated with pygal 1.4.4 ©Kozea 2011-2014 on 2014-03-06-->
   <!--http://pygal.org-->
   <!--http://github.com/Kozea/pygal-->
   <defs>
      <style type="text/css">.title {
font-size:24px;
fill:#000;
text-anchor:middle;
}

.legends .legend text {
font-size:24px;
fill:#000;
fill-opacity:1;
}

.axis text {
font-size:18px;
}

.axis text.major {
font-size:18px;
stroke:#000;
fill:#000;
stroke-width:.5px;
}

.series text {
font-size:8px;
fill:#000;
stroke:none;
}

.tooltip text {
font-size:16px;
fill:#000;
fill-opacity:1;
}

text.no_data {
font-size:64px;
fill:#000;
text-anchor:middle;
}

 {
background-color:transparent;
}

path,line,rect,circle {
-webkit-transition:250ms;
-moz-transition:250ms;
transition:250ms;
}

.graph &gt; .background {
fill:transparent;
}

.plot &gt; .background {
fill:rgba(0,0,0,0.05);
}

.axis .guide.line {
stroke:#000;
stroke-dasharray:4,4;
}

.axis .guides:hover text {
fill:#000;
opacity:1;
}

.reactive.active,.active .reactive {
fill-opacity:.9;
}

.tooltip rect {
fill:rgba(0,0,0,0.05);
stroke:#000;
fill-opacity:0.8;
}

.map-element {
fill:#000;
stroke:#000!important;
opacity:.9;
stroke-width:3;
-webkit-transition:250ms;
-moz-transition:250ms;
-o-transition:250ms;
transition:250ms;
}

.map-element:hover {
opacity:1;
stroke-width:10;
}

.guide.line {
fill-opacity:0;
}

.axis.y text {
text-anchor:end;
}

.axis.y .logarithmic text:not(.major),.axis.y2 .logarithmic text:not(.major) {
font-size:50%;
}

.axis .major.guide.line {
stroke-dasharray:6,6;
}

.horizontal .axis.y .guide.line,.horizontal .axis.y2 .guide.line,.vertical .axis.x .guide.line {
opacity:0;
}

.horizontal .axis.always_show .guide.line,.vertical .axis.always_show .guide.line {
opacity:1!important;
}

.nofill {
fill:none;
}

.subtle-fill {
fill-opacity:.2;
}

.dot {
stroke-width:1px;
fill-opacity:1;
}

.dot.active {
stroke-width:5px;
}

text {
font-family:HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
font-weight:300;
}

.graph,.legends .legend:hover text {
fill:#000;
}

.axis .line,.axis .major.line,.axis.y .guides:hover .guide.line,.line-graph .axis.x .guides:hover .guide.line,.stackedline-graph .axis.x .guides:hover .guide.line,.xy-graph .axis.x .guides:hover .guide.line {
stroke:#000;
}

.reactive,.tooltip text tspan.label {
fill-opacity:.8;
}

.color-0,.color-0 a:visited,.color-5,.color-5 a:visited,.color-10,.color-10 a:visited,.color-15,.color-15 a:visited {
stroke:#0c3795;
fill:#0c3795;
}

.color-1,.color-1 a:visited,.color-6,.color-6 a:visited,.color-11,.color-11 a:visited {
stroke:#752641;
fill:#752641;
}

.color-2,.color-2 a:visited,.color-7,.color-7 a:visited,.color-12,.color-12 a:visited {
stroke:#e47f00;
fill:#e47f00;
}

.color-3,.color-3 a:visited,.color-8,.color-8 a:visited,.color-13,.color-13 a:visited {
stroke:#9faa00;
fill:#9faa00;
}

.color-4,.color-4 a:visited,.color-9,.color-9 a:visited,.color-14,.color-14 a:visited {
stroke:#950c0c;
fill:#950c0c;
}

.centered,.axis.x text {
text-anchor:middle;
}

.axis.x:not(.web) text[transform],.axis.y2 text {
text-anchor:start;
}

.axis.y .guides:hover .guide.line,.axis.y2 .guides:hover .guide.line,.axis.x .guides:hover .guide.line,.series text.active {
opacity:1;
}</style>
      <script type="text/javascript">window.config = {
    "x_label_format": "%Y-%m-%d %H:%M:%S.%f",
    "print_values": false,
    "css": ["style.css", "graph.css", "/app/chartspree/templates/chartbase.css"],
    "y_labels_major": null,
    "no_data_font_size": 64,
    "pretty_print": false,
    "y_labels_major_count": 3,
    "stroke": true,
    "spacing": 10,
    "show_x_guides": false,
    "range": null,
    "value_formatter": null,
    "fill": false,
    "value_font_size": 8,
    "title": null,
    "y_labels_major_every": null,
    "label_font_size": 18,
    "style": {
        "foreground_dark": "#000",
        "foreground_light": "#000",
        "foreground": "#000",
        "colors": ["rgb(12,55,149)", "rgb(117,38,65)", "rgb(228,127,0)", "rgb(159,170,0)", "rgb(149,12,12)"],
        "plot_background": "rgba(0,0,0,0.05)",
        "opacity_hover": ".9",
        "opacity": ".8",
        "transition": "250ms",
        "background": "transparent"
    },
    "no_prefix": true,
    "strict": false,
    "truncate_legend": null,
    "show_y_guides": false,
    "inner_radius": 0,
    "x_title": null,
    "y_title": null,
    "interpolation_precision": 250,
    "logarithmic": false,
    "dots_size": 2.5,
    "zero": 0,
    "show_dots": true,
    "rounded_bars": null,
    "title_font_size": 24,
    "y_labels": null,
    "margin": 20,
    "x_label_rotation": 0,
    "order_min": null,
    "legend_font_size": 24,
    "disable_xml_declaration": false,
    "x_labels_major_every": null,
    "show_minor_x_labels": true,
    "y_label_rotation": 0,
    "width": 800,
    "x_labels_major": null,
    "major_label_font_size": 18,
    "human_readable": false,
    "x_labels_major_count": null,
    "include_x_axis": false,
    "js": ["http://kozea.github.com/pygal.js/javascripts/svg.jquery.js", "http://kozea.github.com/pygal.js/javascripts/pygal-tooltips.js"],
    "print_zeroes": false,
    "show_minor_y_labels": false,
    "x_labels": null,
    "explicit_size": false,
    "show_y_labels": true,
    "truncate_label": null,
    "interpolation_parameters": {},
    "height": 250,
    "no_data_text": "No data",
    "show_legend": true,
    "tooltip_font_size": 16,
    "legend_at_bottom": false,
    "interpolate": null,
    "legend_box_size": 12,
    "tooltip_border_radius": 0
}</script>
      <script type="text/javascript" xlink:href="http://kozea.github.com/pygal.js/javascripts/svg.jquery.js" />
      <script type="text/javascript" xlink:href="http://kozea.github.com/pygal.js/javascripts/pygal-tooltips.js" />
   </defs>
   <title />
   <g class="graph bar-graph vertical">
      <rect class="background" height="250" width="800" x="0" y="0" />
      <g class="plot" transform="translate(127, 20)">
         <rect class="background" height="210" width="652.4" x="0" y="0" />
         <g class="axis y">
            <g class="guides">
               <text class="major" x="-5" y="212.261538462">0.0</text>
            </g>
            <g class="guides">
               <text class="major" x="-5" y="111.3">3.0</text>
            </g>
            <g class="guides">
               <text class="major" x="-5" y="10.3384615385">6.0</text>
            </g>
         </g>
         <g class="series serie-0 color-0">
            <g class="bars">
               <g class="bar">
                  <rect class="rect reactive tooltip-trigger" height="33.6538461538" rx="0" ry="0" width="97.1574153846" x="26.6982153846" y="172.307692308" />
                  <desc class="value">1</desc>
                  <desc class="x centered">75.2769230769</desc>
                  <desc class="y centered">189.134615385</desc>
               </g>
               <g class="bar">
                  <rect class="rect reactive tooltip-trigger" height="33.6538461538" rx="0" ry="0" width="97.1574153846" x="152.159753846" y="172.307692308" />
                  <desc class="value">1</desc>
                  <desc class="x centered">200.738461538</desc>
                  <desc class="y centered">189.134615385</desc>
               </g>
               <g class="bar">
                  <rect class="rect reactive tooltip-trigger" height="67.3076923077" rx="0" ry="0" width="97.1574153846" x="277.621292308" y="138.653846154" />
                  <desc class="value">2</desc>
                  <desc class="x centered">326.2</desc>
                  <desc class="y centered">172.307692308</desc>
               </g>
               <g class="bar">
                  <rect class="rect reactive tooltip-trigger" height="100.961538462" rx="0" ry="0" width="97.1574153846" x="403.082830769" y="105.0" />
                  <desc class="value">3</desc>
                  <desc class="x centered">451.661538462</desc>
                  <desc class="y centered">155.480769231</desc>
               </g>
               <g class="bar">
                  <rect class="rect reactive tooltip-trigger" height="201.923076923" rx="0" ry="0" width="97.1574153846" x="528.544369231" y="4.03846153846" />
                  <desc class="value">6</desc>
                  <desc class="x centered">577.123076923</desc>
                  <desc class="y centered">105.0</desc>
               </g>
            </g>
         </g>
      </g>
      <g class="titles" />
      <g class="plot overlay" transform="translate(127, 20)">
         <g class="series serie-0 color-0" />
      </g>
      <g class="plot text-overlay" transform="translate(127, 20)">
         <g class="series serie-0 color-0" />
      </g>
      <g class="plot tooltip-overlay" transform="translate(127, 20)">
         <g class="tooltip" style="opacity: 0" transform="translate(0 0)">
            <a>
               <rect class="tooltip-box" height="0" rx="0" ry="0" width="0" />
               <text class="text">
                  <tspan class="label" />
                  <tspan class="value" />
               </text>
            </a>
         </g>
      </g>
      <g class="legends" transform="translate(10, 30)">
         <g class="legend reactive activate-serie" id="activate-serie-0">
            <rect class="color-0 reactive" height="12" width="12" x="0.0" y="6.0" />
            <text x="17.0" y="19.2">Foo</text>
         </g>
      </g>
      <g class="legends" transform="translate(790, 30)" />
   </g>
</svg>