chartlet 0.22.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<figure class="chartlet-figure" data-viz="chart"><figcaption>Effects of an evening without a phone</figcaption><svg xmlns="http://www.w3.org/2000/svg" width="720" height="340" viewBox="0 0 720 340" id="chartlet-900c7e78de68b71a" role="img" aria-labelledby="chartlet-900c7e78de68b71a-title chartlet-900c7e78de68b71a-description" class="chartlet-root"><title id="chartlet-900c7e78de68b71a-title">Effects of an evening without a phone</title><desc id="chartlet-900c7e78de68b71a-description">Bar chart with 5 categories. Highest: 4.5 (Sleep quality). Lowest: 1.5 (Less access to news). Colors show groups: Benefit: Sleep quality, Concentration, Conversation; Harm: Missed messages, Less access to news.</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-900c7e78de68b71a .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-900c7e78de68b71a .chartlet-label,#chartlet-900c7e78de68b71a .chartlet-tick,#chartlet-900c7e78de68b71a .chartlet-value,#chartlet-900c7e78de68b71a .chartlet-value-inverse,#chartlet-900c7e78de68b71a .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-900c7e78de68b71a .chartlet-value,#chartlet-900c7e78de68b71a .chartlet-value-inverse{font-weight:600}#chartlet-900c7e78de68b71a .chartlet-value{fill:var(--chartlet-text)}#chartlet-900c7e78de68b71a .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-900c7e78de68b71a .chartlet-axis-title{font-weight:600}#chartlet-900c7e78de68b71a .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-900c7e78de68b71a .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-900c7e78de68b71a .chartlet-bar,#chartlet-900c7e78de68b71a .chartlet-point{fill:var(--chartlet-accent)}#chartlet-900c7e78de68b71a .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-900c7e78de68b71a .chartlet-background{fill:var(--chartlet-background)}#chartlet-900c7e78de68b71a .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-900c7e78de68b71a .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-900c7e78de68b71a .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-900c7e78de68b71a .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-900c7e78de68b71a .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="152.44" y1="58" x2="152.44" y2="284" class="chartlet-zero"/><text x="152.44" y="306" text-anchor="middle" class="chartlet-tick">0</text><line x1="252.352" y1="58" x2="252.352" y2="284" class="chartlet-grid"/><text x="252.352" y="306" text-anchor="middle" class="chartlet-tick">1</text><line x1="352.264" y1="58" x2="352.264" y2="284" class="chartlet-grid"/><text x="352.264" y="306" text-anchor="middle" class="chartlet-tick">2</text><line x1="452.176" y1="58" x2="452.176" y2="284" class="chartlet-grid"/><text x="452.176" y="306" text-anchor="middle" class="chartlet-tick">3</text><line x1="552.088" y1="58" x2="552.088" y2="284" class="chartlet-grid"/><text x="552.088" y="306" text-anchor="middle" class="chartlet-tick">4</text><line x1="652" y1="58" x2="652" y2="284" class="chartlet-grid"/><text x="652" y="306" text-anchor="middle" class="chartlet-tick">5</text><text x="402.22" y="328" text-anchor="middle" class="chartlet-axis-title">Effect on a scale of 0 to 5</text><rect x="152.44" y="2" width="10" height="10" class="chartlet-bar chartlet-series-1"/><text x="168.44" y="11" text-anchor="start" class="chartlet-legend">Benefit</text><rect x="233.68" y="2" width="10" height="10" class="chartlet-bar chartlet-series-2"/><text x="249.68" y="11" text-anchor="start" class="chartlet-legend">Harm</text><rect x="152.44" y="66.136" width="449.604" height="28.928" class="chartlet-bar chartlet-series-1"><title>Sleep quality – Benefit: 4.5</title></rect><text x="377.242" y="84.6" text-anchor="middle" class="chartlet-value-inverse">4.5</text><text x="140.44" y="84.6" text-anchor="end" class="chartlet-label">Sleep quality</text><rect x="152.44" y="111.336" width="349.692" height="28.928" class="chartlet-bar chartlet-series-1"><title>Concentration – Benefit: 3.5</title></rect><text x="327.286" y="129.8" text-anchor="middle" class="chartlet-value-inverse">3.5</text><text x="140.44" y="129.8" text-anchor="end" class="chartlet-label">Concentration</text><rect x="152.44" y="156.536" width="299.736" height="28.928" class="chartlet-bar chartlet-series-1"><title>Conversation – Benefit: 3</title></rect><text x="302.308" y="175" text-anchor="middle" class="chartlet-value-inverse">3</text><text x="140.44" y="175" text-anchor="end" class="chartlet-label">Conversation</text><rect x="152.44" y="201.736" width="199.824" height="28.928" class="chartlet-bar chartlet-series-2"><title>Missed messages – Harm: 2</title></rect><text x="252.352" y="220.2" text-anchor="middle" class="chartlet-value-inverse">2</text><text x="140.44" y="220.2" text-anchor="end" class="chartlet-label">Missed messages</text><rect x="152.44" y="246.936" width="149.868" height="28.928" class="chartlet-bar chartlet-series-2"><title>Less access to news – Harm: 1.5</title></rect><text x="227.374" y="265.4" text-anchor="middle" class="chartlet-value-inverse">1.5</text><text x="140.44" y="265.4" text-anchor="end" class="chartlet-label">Less access to news</text></svg><p class="chartlet-source">Source: Illustrative values</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Effects of an evening without a phone</caption><thead><tr><th scope="col">Category</th><th scope="col">Value</th><th scope="col">Group</th></tr></thead><tbody><tr><th scope="row">Sleep quality</th><td>4.5</td><td>Benefit</td></tr><tr><th scope="row">Concentration</th><td>3.5</td><td>Benefit</td></tr><tr><th scope="row">Conversation</th><td>3</td><td>Benefit</td></tr><tr><th scope="row">Missed messages</th><td>2</td><td>Harm</td></tr><tr><th scope="row">Less access to news</th><td>1.5</td><td>Harm</td></tr></tbody></table></details></figure>