<div class="chartlet-wrapper"><fieldset class="chartlet-filter"><legend>Series</legend><label><input type="checkbox" class="series-0" checked> Budget</label><label><input type="checkbox" class="series-1" checked> Actual</label></fieldset><figure class="chartlet-figure"><figcaption>Budget and actual costs</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" role="img" aria-labelledby="chartlet-9618267784f2bd4f-title chartlet-9618267784f2bd4f-description" class="chartlet-root"><title id="chartlet-9618267784f2bd4f-title">Budget and actual costs</title><desc id="chartlet-9618267784f2bd4f-description">Bar chart with 4 categories and 2 series (Budget, Actual). Highest: 160 (Budget in April). Lowest: 120 (Budget in January). 1 value is missing.</desc><style>.chartlet-root{max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:#172033}.chartlet-title{font-size:22px;font-weight:650;fill:#172033}.chartlet-label,.chartlet-tick,.chartlet-value,.chartlet-value-inverse,.chartlet-axis-title{font-size:12px;fill:#344054}.chartlet-value,.chartlet-value-inverse{font-weight:600}.chartlet-value{fill:#172033}.chartlet-value-inverse{fill:#fff}.chartlet-axis-title{font-weight:600}.chartlet-grid{stroke:#d9dee8;stroke-width:1}.chartlet-zero{stroke:#667085;stroke-width:1.5}.chartlet-bar,.chartlet-point{fill:#2563eb}.chartlet-line{fill:none;stroke:#2563eb;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.chartlet-legend{font-size:12px;fill:#344054}.chartlet-series-1{fill:#2563eb}.chartlet-series-2{fill:#c2410c}.chartlet-series-3{fill:#475569}.chartlet-series-4{fill:#111827}.chartlet-wrapper{display:inline-block;max-width:100%}.chartlet-filter{border:none;padding:0;margin:0 0 12px 0}.chartlet-filter legend{font-size:14px;font-weight:650;margin-bottom:4px}.chartlet-filter label{display:inline-flex;align-items:center;min-height:44px;font-size:13px;margin-right:14px;cursor:pointer;white-space:nowrap}.chartlet-filter input{margin-right:4px}.chartlet-filter input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.chartlet-wrapper:has(.chartlet-filter input.series-0:not(:checked)) .chartlet-root [data-series="0"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-1:not(:checked)) .chartlet-root [data-series="1"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-2:not(:checked)) .chartlet-root [data-series="2"]{display:none}.chartlet-wrapper:has(.chartlet-filter input.series-3:not(:checked)) .chartlet-root [data-series="3"]{display:none}</style><text x="72" y="30" text-anchor="start" class="chartlet-title">Budget and actual costs</text><line x1="72" y1="368" x2="776" y2="368" class="chartlet-zero"/><text x="62" y="372" text-anchor="end" class="chartlet-tick">0</text><line x1="72" y1="301.5" x2="776" y2="301.5" class="chartlet-grid"/><text x="62" y="305.5" text-anchor="end" class="chartlet-tick">50</text><line x1="72" y1="235" x2="776" y2="235" class="chartlet-grid"/><text x="62" y="239" text-anchor="end" class="chartlet-tick">100</text><line x1="72" y1="168.5" x2="776" y2="168.5" class="chartlet-grid"/><text x="62" y="172.5" text-anchor="end" class="chartlet-tick">150</text><line x1="72" y1="102" x2="776" y2="102" class="chartlet-grid"/><text x="62" y="106" text-anchor="end" class="chartlet-tick">200</text><text x="72" y="82" text-anchor="start" class="chartlet-axis-title">Costs in thousands</text><rect x="72" y="46" width="10" height="10" class="chartlet-bar chartlet-series-1"/><text x="88" y="55" text-anchor="start" class="chartlet-legend">Budget</text><rect x="149.64" y="46" width="10" height="10" class="chartlet-bar chartlet-series-2"/><text x="165.64" y="55" text-anchor="start" class="chartlet-legend">Actual</text><rect data-series="0" x="91.6" y="208.4" width="66.4" height="159.6" class="chartlet-bar chartlet-series-1"><title>January – Budget: 120</title></rect><text data-series="0" x="124.8" y="200.4" text-anchor="middle" class="chartlet-value">120</text><rect data-series="1" x="162" y="195.1" width="66.4" height="172.9" class="chartlet-bar chartlet-series-2"><title>January – Actual: 130</title></rect><text data-series="1" x="195.2" y="187.1" text-anchor="middle" class="chartlet-value">130</text><text x="160" y="392" text-anchor="middle" class="chartlet-label">January</text><rect data-series="0" x="267.6" y="168.5" width="66.4" height="199.5" class="chartlet-bar chartlet-series-1"><title>February – Budget: 150</title></rect><text data-series="0" x="300.8" y="160.5" text-anchor="middle" class="chartlet-value">150</text><rect data-series="1" x="338" y="175.15" width="66.4" height="192.85" class="chartlet-bar chartlet-series-2"><title>February – Actual: 145</title></rect><text data-series="1" x="371.2" y="167.15" text-anchor="middle" class="chartlet-value">145</text><text x="336" y="392" text-anchor="middle" class="chartlet-label">February</text><rect data-series="0" x="443.6" y="181.8" width="66.4" height="186.2" class="chartlet-bar chartlet-series-1"><title>March – Budget: 140</title></rect><text data-series="0" x="476.8" y="173.8" text-anchor="middle" class="chartlet-value">140</text><rect data-series="1" x="514" y="165.84" width="66.4" height="202.16" class="chartlet-bar chartlet-series-2"><title>March – Actual: 152</title></rect><text data-series="1" x="547.2" y="157.84" text-anchor="middle" class="chartlet-value">152</text><text x="512" y="392" text-anchor="middle" class="chartlet-label">March</text><rect data-series="0" x="619.6" y="155.2" width="66.4" height="212.8" class="chartlet-bar chartlet-series-1"><title>April – Budget: 160</title></rect><text data-series="0" x="652.8" y="147.2" text-anchor="middle" class="chartlet-value">160</text><text x="688" y="392" text-anchor="middle" class="chartlet-label">April</text><text x="424" y="436" text-anchor="middle" class="chartlet-axis-title">Month</text></svg><p class="chartlet-source">Source: Example data</p><details class="chartlet-data"><summary>Show chart data</summary><table><caption>Data for Budget and actual costs</caption><thead><tr><th scope="col">Category</th><th scope="col">Budget</th><th scope="col">Actual</th></tr></thead><tbody><tr><th scope="row">January</th><td>120</td><td>130</td></tr><tr><th scope="row">February</th><td>150</td><td>145</td></tr><tr><th scope="row">March</th><td>140</td><td>152</td></tr><tr><th scope="row">April</th><td>160</td><td>Missing</td></tr></tbody></table></details></figure></div>