<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" data-viz="chart"><figcaption>Budget and actual costs</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-9618267784f2bd4f" 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{--chartlet-text:#172033;--chartlet-muted:#344054;--chartlet-grid:#d9dee8;--chartlet-zero:#667085;--chartlet-accent:#2563eb;--chartlet-background:#fff;--chartlet-color-1:#2563eb;--chartlet-color-2:#c2410c;--chartlet-color-3:#475569;--chartlet-color-4:#111827;max-width:100%;height:auto;font-family:Inter,ui-sans-serif,system-ui,sans-serif;color:var(--chartlet-text)}#chartlet-9618267784f2bd4f .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-9618267784f2bd4f .chartlet-label,#chartlet-9618267784f2bd4f .chartlet-tick,#chartlet-9618267784f2bd4f .chartlet-value,#chartlet-9618267784f2bd4f .chartlet-value-inverse,#chartlet-9618267784f2bd4f .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-9618267784f2bd4f .chartlet-value,#chartlet-9618267784f2bd4f .chartlet-value-inverse{font-weight:600}#chartlet-9618267784f2bd4f .chartlet-value{fill:var(--chartlet-text)}#chartlet-9618267784f2bd4f .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-9618267784f2bd4f .chartlet-axis-title{font-weight:600}#chartlet-9618267784f2bd4f .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-9618267784f2bd4f .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-9618267784f2bd4f .chartlet-bar,#chartlet-9618267784f2bd4f .chartlet-point{fill:var(--chartlet-accent)}#chartlet-9618267784f2bd4f .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-9618267784f2bd4f .chartlet-background{fill:var(--chartlet-background)}#chartlet-9618267784f2bd4f .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-9618267784f2bd4f .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-9618267784f2bd4f .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-9618267784f2bd4f .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-9618267784f2bd4f .chartlet-series-4{fill:var(--chartlet-color-4)}.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><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="290.5" x2="776" y2="290.5" class="chartlet-grid"/><text x="62" y="294.5" text-anchor="end" class="chartlet-tick">50</text><line x1="72" y1="213" x2="776" y2="213" class="chartlet-grid"/><text x="62" y="217" text-anchor="end" class="chartlet-tick">100</text><line x1="72" y1="135.5" x2="776" y2="135.5" class="chartlet-grid"/><text x="62" y="139.5" text-anchor="end" class="chartlet-tick">150</text><line x1="72" y1="58" x2="776" y2="58" class="chartlet-grid"/><text x="62" y="62" text-anchor="end" class="chartlet-tick">200</text><text x="72" y="38" text-anchor="start" class="chartlet-axis-title">Costs in thousands</text><rect x="72" y="2" width="10" height="10" class="chartlet-bar chartlet-series-1"/><text x="88" y="11" text-anchor="start" class="chartlet-legend">Budget</text><rect x="149.64" y="2" width="10" height="10" class="chartlet-bar chartlet-series-2"/><text x="165.64" y="11" text-anchor="start" class="chartlet-legend">Actual</text><rect data-series="0" x="91.6" y="182" width="66.4" height="186" class="chartlet-bar chartlet-series-1"><title>January – Budget: 120</title></rect><text data-series="0" x="124.8" y="174" text-anchor="middle" class="chartlet-value">120</text><rect data-series="1" x="162" y="166.5" width="66.4" height="201.5" class="chartlet-bar chartlet-series-2"><title>January – Actual: 130</title></rect><text data-series="1" x="195.2" y="158.5" 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="135.5" width="66.4" height="232.5" class="chartlet-bar chartlet-series-1"><title>February – Budget: 150</title></rect><text data-series="0" x="300.8" y="127.5" text-anchor="middle" class="chartlet-value">150</text><rect data-series="1" x="338" y="143.25" width="66.4" height="224.75" class="chartlet-bar chartlet-series-2"><title>February – Actual: 145</title></rect><text data-series="1" x="371.2" y="135.25" 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="151" width="66.4" height="217" class="chartlet-bar chartlet-series-1"><title>March – Budget: 140</title></rect><text data-series="0" x="476.8" y="143" text-anchor="middle" class="chartlet-value">140</text><rect data-series="1" x="514" y="132.4" width="66.4" height="235.6" class="chartlet-bar chartlet-series-2"><title>March – Actual: 152</title></rect><text data-series="1" x="547.2" y="124.4" 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="120" width="66.4" height="248" class="chartlet-bar chartlet-series-1"><title>April – Budget: 160</title></rect><text data-series="0" x="652.8" y="112" 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" data-viz-text><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>