chartlet 0.7.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Operating costs</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="800" height="450" viewBox="0 0 800 450" id="chartlet-910b8c1d9fa317e5" role="img" aria-labelledby="chartlet-910b8c1d9fa317e5-title chartlet-910b8c1d9fa317e5-description" class="chartlet-root"><title id="chartlet-910b8c1d9fa317e5-title">Operating costs</title><desc id="chartlet-910b8c1d9fa317e5-description">Operating costs rose over the half year, with the steepest increase in June.</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-910b8c1d9fa317e5 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-910b8c1d9fa317e5 .chartlet-label,#chartlet-910b8c1d9fa317e5 .chartlet-tick,#chartlet-910b8c1d9fa317e5 .chartlet-value,#chartlet-910b8c1d9fa317e5 .chartlet-value-inverse,#chartlet-910b8c1d9fa317e5 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-910b8c1d9fa317e5 .chartlet-value,#chartlet-910b8c1d9fa317e5 .chartlet-value-inverse{font-weight:600}#chartlet-910b8c1d9fa317e5 .chartlet-value{fill:var(--chartlet-text)}#chartlet-910b8c1d9fa317e5 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-910b8c1d9fa317e5 .chartlet-axis-title{font-weight:600}#chartlet-910b8c1d9fa317e5 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-910b8c1d9fa317e5 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-910b8c1d9fa317e5 .chartlet-bar,#chartlet-910b8c1d9fa317e5 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-910b8c1d9fa317e5 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-910b8c1d9fa317e5 .chartlet-background{fill:var(--chartlet-background)}</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="256.667" x2="776" y2="256.667" class="chartlet-grid"/><text x="62" y="260.667" text-anchor="end" class="chartlet-tick">50</text><line x1="72" y1="145.333" x2="776" y2="145.333" class="chartlet-grid"/><text x="62" y="149.333" text-anchor="end" class="chartlet-tick">100</text><line x1="72" y1="34" x2="776" y2="34" class="chartlet-grid"/><text x="62" y="38" text-anchor="end" class="chartlet-tick">150</text><text x="72" y="14" text-anchor="start" class="chartlet-axis-title">Costs in thousands</text><rect x="93.12" y="180.96" width="75.093" height="187.04" class="chartlet-bar"><title>January: 84</title></rect><text x="130.667" y="172.96" text-anchor="middle" class="chartlet-value">84</text><text x="130.667" y="392" text-anchor="middle" class="chartlet-label">January</text><rect x="210.453" y="176.507" width="75.093" height="191.493" class="chartlet-bar"><title>February: 86</title></rect><text x="248" y="168.507" text-anchor="middle" class="chartlet-value">86</text><text x="248" y="392" text-anchor="middle" class="chartlet-label">February</text><rect x="327.787" y="163.147" width="75.093" height="204.853" class="chartlet-bar"><title>March: 92</title></rect><text x="365.333" y="155.147" text-anchor="middle" class="chartlet-value">92</text><text x="365.333" y="392" text-anchor="middle" class="chartlet-label">March</text><rect x="445.12" y="169.827" width="75.093" height="198.173" class="chartlet-bar"><title>April: 89</title></rect><text x="482.667" y="161.827" text-anchor="middle" class="chartlet-value">89</text><text x="482.667" y="392" text-anchor="middle" class="chartlet-label">April</text><rect x="562.453" y="154.24" width="75.093" height="213.76" class="chartlet-bar"><title>May: 96</title></rect><text x="600" y="146.24" text-anchor="middle" class="chartlet-value">96</text><text x="600" y="392" text-anchor="middle" class="chartlet-label">May</text><rect x="679.787" y="143.107" width="75.093" height="224.893" class="chartlet-bar"><title>June: 101</title></rect><text x="717.333" y="135.107" text-anchor="middle" class="chartlet-value">101</text><text x="717.333" y="392" text-anchor="middle" class="chartlet-label">June</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 Operating costs</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th></tr></thead><tbody><tr><th scope="row">January</th><td>84</td></tr><tr><th scope="row">February</th><td>86</td></tr><tr><th scope="row">March</th><td>92</td></tr><tr><th scope="row">April</th><td>89</td></tr><tr><th scope="row">May</th><td>96</td></tr><tr><th scope="row">June</th><td>101</td></tr></tbody></table></details></figure>