examples/output/mixed-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="65" 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="65" y="450" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">2.800</text><text x="65" y="345" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">5.600</text><text x="65" y="240" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">8.400</text><text x="65" y="135" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">11.200</text><text x="65" y="30" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="end" dominant-baseline="alphabetic" alignment-baseline="auto">14.000</text>
    <line x1="75" y1="550" x2="770" y2="550" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="75" 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="75" y1="550" x2="75" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="306.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">100</text>
<line x1="306.66666666667" y1="550" x2="306.66666666667" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" /><text x="538.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">200</text>
<line x1="538.33333333333" y1="550" x2="538.33333333333" 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">300</text>
<line x1="770" y1="550" x2="770" y2="545" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="1.000000" />
    <line x1="75" y1="445" x2="770" y2="445" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="75" y1="340" x2="770" y2="340" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="75" y1="235" x2="770" y2="235" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="75" y1="130" x2="770" y2="130" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" /><line x1="75" y1="25" x2="770" y2="25" stroke="black" stroke-dasharray="none" stroke-width="1" stroke-opacity="0.200000" />
    
    <path d="M 75,550 L 306.66666666667,400 L 538.33333333333,100 L 770,250" fill="none" stroke="black" stroke-width="5" />
<path d="M 75,550 L 306.66666666667,100 L 538.33333333333,25 L 770,287.5" fill="none" stroke="blue" stroke-width="5" />
<rect x="140.83333333333" y="400" width="100" height="150" fill="green" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"><title>4000</title></rect>
<text x="190.83333333333" y="540" font-family="arial" font-size="14" fill="white" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">4.000</text>
<rect x="140.83333333333" y="287.5" width="100" height="112.5" fill="red" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"><title>3000</title></rect>
<text x="190.83333333333" y="390" font-family="arial" font-size="14" fill="white" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">3.000</text>
<text x="190.83333333333" y="580" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">January</text><rect x="372.5" y="175" width="100" height="375" fill="green" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"><title>10000</title></rect>
<text x="422.5" y="580" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">February</text><rect x="604.16666666667" y="400" width="100" height="150" fill="green" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"><title>4000</title></rect>
<text x="654.16666666667" y="540" font-family="arial" font-size="14" fill="white" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">57%</text>
<rect x="604.16666666667" y="287.5" width="100" height="112.5" fill="red" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"><title>3000</title></rect>
<text x="654.16666666667" y="390" font-family="arial" font-size="14" fill="white" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">43%</text>
<text x="654.16666666667" y="580" font-family="arial" font-size="14" fill="black" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">March</text>
    <circle cx="538.33333333333" cy="100" r="10" fill="white" stroke="red" stroke-width="4"><title>12000</title></circle>
<rect x="477.42424242424" y="52.636363636364" width="121.81818181818" height="22" fill="red" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"/>
<text x="538.33333333333" y="70" font-family="arial" font-size="14" fill="white" stroke="none" stroke-width="0" text-anchor="middle" dominant-baseline="alphabetic" alignment-baseline="auto">Point annotation</text><line x1="75" y1="235" x2="770" y2="235" stroke="blue" stroke-dasharray="none" stroke-width="3" stroke-opacity="1.000000" />
<rect x="75" y="209.63636363636" width="128.18181818182" height="22" fill="blue" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"/>
<text x="85" y="227" font-family="arial" font-size="14" fill="white" stroke="none" stroke-width="0" text-anchor="start" dominant-baseline="alphabetic" alignment-baseline="auto">Y Axis annotation</text><rect x="306.66666666667" y="25" width="231.66666666667" height="525" fill="pink" fill-opacity="0.2" stroke="none" stroke-width="0" rx="0" ry="0"/>
<rect x="316.66666666667" y="517.63636363636" width="166.36363636364" height="22" fill="pink" fill-opacity="1" stroke="none" stroke-width="0" rx="0" ry="0"/>
<text x="326.66666666667" y="535" font-family="arial" font-size="14" fill="white" stroke="none" stroke-width="0" text-anchor="start" dominant-baseline="alphabetic" alignment-baseline="auto">X Axis range annotation</text>
</svg>