chartlet 0.23.0

Compile structured data into deterministic, accessible static charts
Documentation
1
<div class="chartlet-wrapper chartlet-responsive chartlet-bp-640"><style>.chartlet-wrapper.chartlet-responsive{display:block;width:100%;container-type:inline-size}.chartlet-variant-mobile{display:none}@container (max-width:639px){.chartlet-bp-640 .chartlet-variant-desktop{display:none}.chartlet-bp-640 .chartlet-variant-mobile{display:block}}</style><figure class="chartlet-figure" data-viz="chart"><figcaption>Customer satisfaction before and after the support redesign</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="760" height="380" viewBox="0 0 760 380" id="chartlet-9650a5dd9eb914c2" role="img" aria-labelledby="chartlet-9650a5dd9eb914c2-title chartlet-9650a5dd9eb914c2-description" class="chartlet-root"><title id="chartlet-9650a5dd9eb914c2-title">Customer satisfaction before and after the support redesign</title><desc id="chartlet-9650a5dd9eb914c2-description">Range chart with 6 categories, each a span from low to high. Lowest low: 49 (Billing). Highest high: 86 (Mobile app). Each row connects an open dot at the low value with a filled dot at the high value. Widest change: 23 (Onboarding).</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-9650a5dd9eb914c2 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-9650a5dd9eb914c2 .chartlet-label,#chartlet-9650a5dd9eb914c2 .chartlet-tick,#chartlet-9650a5dd9eb914c2 .chartlet-value,#chartlet-9650a5dd9eb914c2 .chartlet-value-inverse,#chartlet-9650a5dd9eb914c2 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-9650a5dd9eb914c2 .chartlet-value,#chartlet-9650a5dd9eb914c2 .chartlet-value-inverse{font-weight:600}#chartlet-9650a5dd9eb914c2 .chartlet-value{fill:var(--chartlet-text)}#chartlet-9650a5dd9eb914c2 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-9650a5dd9eb914c2 .chartlet-axis-title{font-weight:600}#chartlet-9650a5dd9eb914c2 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-9650a5dd9eb914c2 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-9650a5dd9eb914c2 .chartlet-bar,#chartlet-9650a5dd9eb914c2 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-9650a5dd9eb914c2 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-9650a5dd9eb914c2 .chartlet-background{fill:var(--chartlet-background)}#chartlet-9650a5dd9eb914c2 .chartlet-range{fill:var(--chartlet-accent);fill-opacity:.3;stroke:var(--chartlet-accent);stroke-width:1}#chartlet-9650a5dd9eb914c2 .chartlet-range-hatch{stroke:none}#chartlet-9650a5dd9eb914c2 .chartlet-hatch-line{stroke:var(--chartlet-accent);stroke-width:1.2;opacity:.75}#chartlet-9650a5dd9eb914c2 .chartlet-range-mid{stroke:var(--chartlet-text);stroke-width:3}#chartlet-9650a5dd9eb914c2 .chartlet-range-weight{fill:var(--chartlet-text);stroke:none}#chartlet-9650a5dd9eb914c2 .chartlet-range-summary{fill:var(--chartlet-text);fill-opacity:.85;stroke:var(--chartlet-text);stroke-width:1}#chartlet-9650a5dd9eb914c2 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-opacity:.6}#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-low{fill:var(--chartlet-background);stroke:var(--chartlet-accent);stroke-width:2.5}#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-high{fill:var(--chartlet-accent);stroke:var(--chartlet-accent);stroke-width:2.5}#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-low.chartlet-range-series-1,#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-low.chartlet-range-series-2,#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-low.chartlet-range-series-3,#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-low.chartlet-range-series-4{fill:var(--chartlet-background)}#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-line.chartlet-range-series-1,#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-line.chartlet-range-series-2,#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-line.chartlet-range-series-3,#chartlet-9650a5dd9eb914c2 .chartlet-dumbbell-line.chartlet-range-series-4{fill:none}</style><line x1="118.64" y1="34" x2="118.64" y2="324" class="chartlet-grid"/><text x="118.64" y="346" text-anchor="middle" class="chartlet-tick">40</text><line x1="309.813" y1="34" x2="309.813" y2="324" class="chartlet-grid"/><text x="309.813" y="346" text-anchor="middle" class="chartlet-tick">60</text><line x1="500.987" y1="34" x2="500.987" y2="324" class="chartlet-grid"/><text x="500.987" y="346" text-anchor="middle" class="chartlet-tick">80</text><line x1="692.16" y1="34" x2="692.16" y2="324" class="chartlet-grid"/><text x="692.16" y="346" text-anchor="middle" class="chartlet-tick">100</text><text x="405.4" y="368" text-anchor="middle" class="chartlet-axis-title">Satisfaction score</text><line x1="290.696" y1="58.167" x2="510.545" y2="58.167" class="chartlet-dumbbell-line"/><circle cx="290.696" cy="58.167" r="5.5" class="chartlet-dumbbell-low"><title>Onboarding: 58 to 81</title></circle><circle cx="510.545" cy="58.167" r="5.5" class="chartlet-dumbbell-high"><title>Onboarding: 58 to 81</title></circle><text x="279.696" y="62.167" text-anchor="end" class="chartlet-value">58</text><text x="521.545" y="62.167" text-anchor="start" class="chartlet-value">81</text><text x="106.64" y="62.167" text-anchor="end" class="chartlet-label">Onboarding</text><line x1="367.165" y1="106.5" x2="558.339" y2="106.5" class="chartlet-dumbbell-line"/><circle cx="367.165" cy="106.5" r="5.5" class="chartlet-dumbbell-low"><title>Mobile app: 66 to 86</title></circle><circle cx="558.339" cy="106.5" r="5.5" class="chartlet-dumbbell-high"><title>Mobile app: 66 to 86</title></circle><text x="356.165" y="110.5" text-anchor="end" class="chartlet-value">66</text><text x="569.339" y="110.5" text-anchor="start" class="chartlet-value">86</text><text x="106.64" y="110.5" text-anchor="end" class="chartlet-label">Mobile app</text><line x1="204.668" y1="154.833" x2="348.048" y2="154.833" class="chartlet-dumbbell-line"/><circle cx="204.668" cy="154.833" r="5.5" class="chartlet-dumbbell-low"><title>Billing: 49 to 64</title></circle><circle cx="348.048" cy="154.833" r="5.5" class="chartlet-dumbbell-high"><title>Billing: 49 to 64</title></circle><text x="193.668" y="158.833" text-anchor="end" class="chartlet-value">49</text><text x="359.048" y="158.833" text-anchor="start" class="chartlet-value">64</text><text x="106.64" y="158.833" text-anchor="end" class="chartlet-label">Billing</text><line x1="319.372" y1="203.167" x2="405.4" y2="203.167" class="chartlet-dumbbell-line"/><circle cx="319.372" cy="203.167" r="5.5" class="chartlet-dumbbell-low"><title>Documentation: 61 to 70</title></circle><circle cx="405.4" cy="203.167" r="5.5" class="chartlet-dumbbell-high"><title>Documentation: 61 to 70</title></circle><text x="308.372" y="207.167" text-anchor="end" class="chartlet-value">61</text><text x="416.4" y="207.167" text-anchor="start" class="chartlet-value">70</text><text x="106.64" y="207.167" text-anchor="end" class="chartlet-label">Documentation</text><line x1="424.517" y1="251.5" x2="491.428" y2="251.5" class="chartlet-dumbbell-line"/><circle cx="424.517" cy="251.5" r="5.5" class="chartlet-dumbbell-low"><title>Live chat: 72 to 79</title></circle><circle cx="491.428" cy="251.5" r="5.5" class="chartlet-dumbbell-high"><title>Live chat: 72 to 79</title></circle><text x="413.517" y="255.5" text-anchor="end" class="chartlet-value">72</text><text x="502.428" y="255.5" text-anchor="start" class="chartlet-value">79</text><text x="106.64" y="255.5" text-anchor="end" class="chartlet-label">Live chat</text><line x1="395.841" y1="299.833" x2="443.635" y2="299.833" class="chartlet-dumbbell-line"/><circle cx="395.841" cy="299.833" r="5.5" class="chartlet-dumbbell-low"><title>Phone support: 69 to 74</title></circle><circle cx="443.635" cy="299.833" r="5.5" class="chartlet-dumbbell-high"><title>Phone support: 69 to 74</title></circle><text x="384.841" y="303.833" text-anchor="end" class="chartlet-value">69</text><text x="454.635" y="303.833" text-anchor="start" class="chartlet-value">74</text><text x="106.64" y="303.833" text-anchor="end" class="chartlet-label">Phone support</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="440" viewBox="0 0 380 440" id="chartlet-9650a5dd9eb914c2-m" role="img" aria-labelledby="chartlet-9650a5dd9eb914c2-m-title chartlet-9650a5dd9eb914c2-m-description" class="chartlet-root"><title id="chartlet-9650a5dd9eb914c2-m-title">Customer satisfaction before and after the support redesign</title><desc id="chartlet-9650a5dd9eb914c2-m-description">Range chart with 6 categories, each a span from low to high. Lowest low: 49 (Billing). Highest high: 86 (Mobile app). Each row connects an open dot at the low value with a filled dot at the high value. Widest change: 23 (Onboarding).</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-9650a5dd9eb914c2-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-9650a5dd9eb914c2-m .chartlet-label,#chartlet-9650a5dd9eb914c2-m .chartlet-tick,#chartlet-9650a5dd9eb914c2-m .chartlet-value,#chartlet-9650a5dd9eb914c2-m .chartlet-value-inverse,#chartlet-9650a5dd9eb914c2-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-9650a5dd9eb914c2-m .chartlet-value,#chartlet-9650a5dd9eb914c2-m .chartlet-value-inverse{font-weight:600}#chartlet-9650a5dd9eb914c2-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-9650a5dd9eb914c2-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-9650a5dd9eb914c2-m .chartlet-axis-title{font-weight:600}#chartlet-9650a5dd9eb914c2-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-9650a5dd9eb914c2-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-9650a5dd9eb914c2-m .chartlet-bar,#chartlet-9650a5dd9eb914c2-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-9650a5dd9eb914c2-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-9650a5dd9eb914c2-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-9650a5dd9eb914c2-m .chartlet-range{fill:var(--chartlet-accent);fill-opacity:.3;stroke:var(--chartlet-accent);stroke-width:1}#chartlet-9650a5dd9eb914c2-m .chartlet-range-hatch{stroke:none}#chartlet-9650a5dd9eb914c2-m .chartlet-hatch-line{stroke:var(--chartlet-accent);stroke-width:1.2;opacity:.75}#chartlet-9650a5dd9eb914c2-m .chartlet-range-mid{stroke:var(--chartlet-text);stroke-width:3}#chartlet-9650a5dd9eb914c2-m .chartlet-range-weight{fill:var(--chartlet-text);stroke:none}#chartlet-9650a5dd9eb914c2-m .chartlet-range-summary{fill:var(--chartlet-text);fill-opacity:.85;stroke:var(--chartlet-text);stroke-width:1}#chartlet-9650a5dd9eb914c2-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-opacity:.6}#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-low{fill:var(--chartlet-background);stroke:var(--chartlet-accent);stroke-width:2.5}#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-high{fill:var(--chartlet-accent);stroke:var(--chartlet-accent);stroke-width:2.5}#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-low.chartlet-range-series-1,#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-low.chartlet-range-series-2,#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-low.chartlet-range-series-3,#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-low.chartlet-range-series-4{fill:var(--chartlet-background)}#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-line.chartlet-range-series-1,#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-line.chartlet-range-series-2,#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-line.chartlet-range-series-3,#chartlet-9650a5dd9eb914c2-m .chartlet-dumbbell-line.chartlet-range-series-4{fill:none}#chartlet-9650a5dd9eb914c2-m .chartlet-title-small{font-size:18px}</style><line x1="118.64" y1="34" x2="118.64" y2="384" class="chartlet-grid"/><text x="118.64" y="406" text-anchor="middle" class="chartlet-tick">40</text><line x1="183.147" y1="34" x2="183.147" y2="384" class="chartlet-grid"/><text x="183.147" y="406" text-anchor="middle" class="chartlet-tick">60</text><line x1="247.653" y1="34" x2="247.653" y2="384" class="chartlet-grid"/><text x="247.653" y="406" text-anchor="middle" class="chartlet-tick">80</text><line x1="312.16" y1="34" x2="312.16" y2="384" class="chartlet-grid"/><text x="312.16" y="406" text-anchor="middle" class="chartlet-tick">100</text><text x="215.4" y="428" text-anchor="middle" class="chartlet-axis-title">Satisfaction score</text><line x1="176.696" y1="63.167" x2="250.879" y2="63.167" class="chartlet-dumbbell-line"/><circle cx="176.696" cy="63.167" r="5.5" class="chartlet-dumbbell-low"><title>Onboarding: 58 to 81</title></circle><circle cx="250.879" cy="63.167" r="5.5" class="chartlet-dumbbell-high"><title>Onboarding: 58 to 81</title></circle><text x="165.696" y="67.167" text-anchor="end" class="chartlet-value">58</text><text x="261.879" y="67.167" text-anchor="start" class="chartlet-value">81</text><text x="106.64" y="67.167" text-anchor="end" class="chartlet-label">Onboarding</text><line x1="202.499" y1="121.5" x2="267.005" y2="121.5" class="chartlet-dumbbell-line"/><circle cx="202.499" cy="121.5" r="5.5" class="chartlet-dumbbell-low"><title>Mobile app: 66 to 86</title></circle><circle cx="267.005" cy="121.5" r="5.5" class="chartlet-dumbbell-high"><title>Mobile app: 66 to 86</title></circle><text x="191.499" y="125.5" text-anchor="end" class="chartlet-value">66</text><text x="278.005" y="125.5" text-anchor="start" class="chartlet-value">86</text><text x="106.64" y="125.5" text-anchor="end" class="chartlet-label">Mobile app</text><line x1="147.668" y1="179.833" x2="196.048" y2="179.833" class="chartlet-dumbbell-line"/><circle cx="147.668" cy="179.833" r="5.5" class="chartlet-dumbbell-low"><title>Billing: 49 to 64</title></circle><circle cx="196.048" cy="179.833" r="5.5" class="chartlet-dumbbell-high"><title>Billing: 49 to 64</title></circle><text x="136.668" y="183.833" text-anchor="end" class="chartlet-value">49</text><text x="207.048" y="183.833" text-anchor="start" class="chartlet-value">64</text><text x="106.64" y="183.833" text-anchor="end" class="chartlet-label">Billing</text><line x1="186.372" y1="238.167" x2="215.4" y2="238.167" class="chartlet-dumbbell-line"/><circle cx="186.372" cy="238.167" r="5.5" class="chartlet-dumbbell-low"><title>Documentation: 61 to 70</title></circle><circle cx="215.4" cy="238.167" r="5.5" class="chartlet-dumbbell-high"><title>Documentation: 61 to 70</title></circle><text x="175.372" y="242.167" text-anchor="end" class="chartlet-value">61</text><text x="226.4" y="242.167" text-anchor="start" class="chartlet-value">70</text><text x="106.64" y="242.167" text-anchor="end" class="chartlet-label">Documentation</text><line x1="221.851" y1="296.5" x2="244.428" y2="296.5" class="chartlet-dumbbell-line"/><circle cx="221.851" cy="296.5" r="5.5" class="chartlet-dumbbell-low"><title>Live chat: 72 to 79</title></circle><circle cx="244.428" cy="296.5" r="5.5" class="chartlet-dumbbell-high"><title>Live chat: 72 to 79</title></circle><text x="210.851" y="300.5" text-anchor="end" class="chartlet-value">72</text><text x="255.428" y="300.5" text-anchor="start" class="chartlet-value">79</text><text x="106.64" y="300.5" text-anchor="end" class="chartlet-label">Live chat</text><line x1="212.175" y1="354.833" x2="228.301" y2="354.833" class="chartlet-dumbbell-line"/><circle cx="212.175" cy="354.833" r="5.5" class="chartlet-dumbbell-low"><title>Phone support: 69 to 74</title></circle><circle cx="228.301" cy="354.833" r="5.5" class="chartlet-dumbbell-high"><title>Phone support: 69 to 74</title></circle><text x="201.175" y="358.833" text-anchor="end" class="chartlet-value">69</text><text x="239.301" y="358.833" text-anchor="start" class="chartlet-value">74</text><text x="106.64" y="358.833" text-anchor="end" class="chartlet-label">Phone support</text></svg></div><p class="chartlet-source">Source: Illustrative survey scores, 0 to 100</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Customer satisfaction before and after the support redesign</caption><thead><tr><th scope="col">Category</th><th scope="col">Low</th><th scope="col">High</th></tr></thead><tbody><tr><th scope="row">Onboarding</th><td>58</td><td>81</td></tr><tr><th scope="row">Mobile app</th><td>66</td><td>86</td></tr><tr><th scope="row">Billing</th><td>49</td><td>64</td></tr><tr><th scope="row">Documentation</th><td>61</td><td>70</td></tr><tr><th scope="row">Live chat</th><td>72</td><td>79</td></tr><tr><th scope="row">Phone support</th><td>69</td><td>74</td></tr></tbody></table></details></figure></div>