examples/output/step-line-chart.svg

<svg xmlns="http://www.w3.org/2000/svg" width="800" height="600" viewBox="0 0 800 600">
    <rect x="0" y="0" width="800" height="600" fill="white" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"/>
    <text x="50" y="555" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">0</text><text x="50" y="450" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">22</text><text x="50" y="345" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">44</text><text x="50" y="240" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">66</text><text x="50" y="135" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">88</text><text x="50" y="30" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">110</text>
    <line x1="60" y1="550" x2="770" y2="550" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="60" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">0</text>
<line x1="60" y1="550" x2="60" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="138.88888888889" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">50</text>
<line x1="138.88888888889" y1="550" x2="138.88888888889" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="217.77777777778" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">100</text>
<line x1="217.77777777778" y1="550" x2="217.77777777778" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="296.66666666667" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">150</text>
<line x1="296.66666666667" y1="550" x2="296.66666666667" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="375.55555555556" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">200</text>
<line x1="375.55555555556" y1="550" x2="375.55555555556" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="454.44444444444" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">250</text>
<line x1="454.44444444444" y1="550" x2="454.44444444444" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="533.33333333333" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">300</text>
<line x1="533.33333333333" y1="550" x2="533.33333333333" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="612.22222222222" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">350</text>
<line x1="612.22222222222" y1="550" x2="612.22222222222" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="691.11111111111" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">400</text>
<line x1="691.11111111111" y1="550" x2="691.11111111111" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="770" y="575" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">450</text>
<line x1="770" y1="550" x2="770" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" />
    <line x1="60" y1="445" x2="770" y2="445" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="60" y1="340" x2="770" y2="340" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="60" y1="235" x2="770" y2="235" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="60" y1="130" x2="770" y2="130" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="60" y1="25" x2="770" y2="25" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" />
    
    <path d="M 60,478.40909090909 H 138.88888888889 V 430.68181818182 H 217.77777777778 V 454.54545454545 H 296.66666666667 V 335.22727272727 H 375.55555555556 V 382.95454545455 H 454.44444444444 V 239.77272727273 H 533.33333333333 V 287.5 H 612.22222222222 V 144.31818181818 H 691.11111111111 V 192.04545454545 H 770 V 25" fill="none" stroke="purple" stroke-width="4" />

    
</svg>