demo_integrated_labels_annotations.svg•3.13 kB
<?xml version="1.0" ?>
<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="600px" viewBox="0 0 800 600" style="background: #f8f9fa; border: 1px solid #dee2e6;">
<text x="400" y="30" text-anchor="middle" font-size="20px" font-weight="bold" fill="#333">Data Labels and Annotations Demo</text>
<rect x="50" y="60" width="700" height="500" fill="#ffffff" stroke="#ddd" stroke-width="1"/>
<rect x="120" y="300" width="40" height="150" fill="#3498db" stroke="#2980b9" stroke-width="1"/>
<rect x="220" y="250" width="40" height="200" fill="#3498db" stroke="#2980b9" stroke-width="1"/>
<rect x="320" y="200" width="40" height="250" fill="#3498db" stroke="#2980b9" stroke-width="1"/>
<rect x="420" y="180" width="40" height="270" fill="#3498db" stroke="#2980b9" stroke-width="1"/>
<rect x="520" y="220" width="40" height="230" fill="#3498db" stroke="#2980b9" stroke-width="1"/>
<text x="140.0" y="295" text-anchor="middle" class="data-label" fill="#2c3e50" font-size="12px">150.0</text>
<text x="240.0" y="245" text-anchor="middle" class="data-label" fill="#2c3e50" font-size="12px">200.0</text>
<text x="340.0" y="195" text-anchor="middle" class="data-label" fill="#2c3e50" font-size="12px">250.0</text>
<text x="440.0" y="175" text-anchor="middle" class="data-label" fill="#2c3e50" font-size="12px">270.0</text>
<text x="540.0" y="215" text-anchor="middle" class="data-label" fill="#2c3e50" font-size="12px">230.0</text>
<g class="text-box-annotation" id="textbox-0">
<rect x="300" y="80" width="200" height="30" fill="#f8f9fa" stroke="#dee2e6" stroke-width="1" opacity="0.9" class="text-box-background"/>
<text x="400.0" y="95.0" text-anchor="middle" dominant-baseline="middle" font-size="16px" fill="#000000" font-family="Arial" class="text-box-content" font-weight="bold">Monthly Sales Performance</text>
</g>
<g class="arrow-annotation" id="arrow-1">
<line x1="450" y1="120" x2="440" y2="170" stroke="#28a745" stroke-width="2" class="arrow-line"/>
<polygon points="440,170 436.7955121727623,160.5273415682246 446.6013189296715,162.48850291960645" fill="#28a745" stroke="#28a745" stroke-width="1" class="arrow-head"/>
<text x="435.1941932430908" y="143.03883864861817" text-anchor="middle" dominant-baseline="middle" font-size="10px" fill="#333333" class="arrow-label">Best Month</text>
</g>
<g class="line-annotation" id="line-2">
<path d="M 140 320 Q 240 270 340 220 440 200 540 240" fill="none" stroke="#e74c3c" stroke-width="2" class="curved-line"/>
</g>
<g class="rectangle-annotation" id="shape-3">
<rect x="600" y="400" width="15" height="15" fill="#3498db" stroke="#2980b9" stroke-width="1" opacity="0.7" class="rectangle-shape"/>
</g>
<g class="text-box-annotation" id="textbox-4">
<rect x="650" y="420" width="100" height="20" fill="transparent" stroke="#cccccc" stroke-width="1" opacity="0.9" class="text-box-background"/>
<text x="700.0" y="430.0" text-anchor="middle" dominant-baseline="middle" font-size="12px" fill="#000000" font-family="Arial" class="text-box-content">Sales Data</text>
</g>
</svg>