I'm trying to come up with a bar chart that is scaled dependent on its parent (it doesn't have a "fixed" size, not coded as x by y pixels, etc.) but am running into difficulty. Specifically, I'm finding it tricky aligning graphics with the text on the axes. Here's what I have so far:-
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 800 640" preserveAspectRatio="xMidYMid meet">
<g stroke="#000000" stroke-linecap="round">
<line x1="2em" y1="1em" x2="2em" y2="600"/>
<line x1="2em" y1="600" x2="800" y2="600"/>
</g>
<g transform="translate(16,600) scale(16,-10)">
<g fill="#F0F0F0">
<rect x="0" y="0" width="1" height="37"/>
<rect x="1" y="0" width="1" height="44"/>
<rect x="2" y="0" width="1" height="39"/>
<rect x="3" y="0" width="1" height="41"/>
<rect x="4" y="0" width="1" height="39"/>
<rect x="5" y="0" width="1" height="41"/>
<rect x="6" y="0" width="1" height="33"/>
<rect x="7" y="0" width="1" height="37"/>
<rect x="8" y="0" width="1" height="43"/>
</g>
<g fill="#C0FFFF">
<rect x="9" y="0" width="1" height="35"/>
<rect x="10" y="0" width="1" height="40"/>
<rect x="11" y="0" width="1" height="26"/>
<rect x="12" y="0" width="1" height="34"/>
<rect x="13" y="0" width="1" height="31"/>
<rect x="14" y="0" width="1" height="35"/>
<rect x="15" y="0" width="1" height="40"/>
<rect x="16" y="0" width="1" height="48"/>
<rect x="17" y="0" width="1" height="42"/>
<rect x="18" y="0" width="1" height="36"/>
</g>
<g fill="#FFC0E0">
<rect x="19" y="0" width="1" height="32"/>
<rect x="20" y="0" width="1" height="32"/>
<rect x="21" y="0" width="1" height="29"/>
<rect x="22" y="0" width="1" height="46"/>
<rect x="23" y="0" width="1" height="41"/>
<rect x="24" y="0" width="1" height="42"/>
<rect x="25" y="0" width="1" height="47"/>
<rect x="26" y="0" width="1" height="45"/>
<rect x="27" y="0" width="1" height="43"/>
<rect x="28" y="0" width="1" height="40"/>
</g>
<g fill="#C0FFC0">
<rect x="29" y="0" width="1" height="45"/>
<rect x="30" y="0" width="1" height="46"/>
<rect x="31" y="0" width="1" height="55"/>
<rect x="32" y="0" width="1" height="49"/>
<rect x="33" y="0" width="1" height="52"/>
<rect x="34" y="0" width="1" height="43"/>
<rect x="35" y="0" width="1" height="47"/>
<rect x="36" y="0" width="1" height="41"/>
<rect x="37" y="0" width="1" height="38"/>
<rect x="38" y="0" width="1" height="55"/>
</g>
</g>
<g font-family="Arial" text-anchor="end">
<text x="1.5em" y="604">0</text>
<text x="1.5em" y="504">10</text>
<text x="1.5em" y="404">20</text>
<text x="1.5em" y="304">30</text>
<text x="1.5em" y="204">40</text>
<text x="1.5em" y="104">50</text>
<text x="1.5em" y="4">55</text>
</g>
</svg>
As you can see, I have defined a viewBox of 800x640, which kind of goes against what I said, but in a way specifies the aspect ratio.
I would like it so that the lines of the axes are aligned so that they are always next to the labels.
I would also like it so that each of the category labels at the bottom (not in the source because I couldn't get them to work) fit exactly inside the width of a bar.
The bars should have a single pixel stroke, but I can't seem to do that and have them fully scalable. One trick I tried was embedding another svg element and rendering the bars in there, scaling that with the chart area. As soon as I tried applying a stroke, everything went black.
Any ideas, or a link to somewhere that has done this before?