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>From visit to order</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-4e9debc21b4d0dbf" role="img" aria-labelledby="chartlet-4e9debc21b4d0dbf-title chartlet-4e9debc21b4d0dbf-description" class="chartlet-root"><title id="chartlet-4e9debc21b4d0dbf-title">From visit to order</title><desc id="chartlet-4e9debc21b4d0dbf-description">Funnel of 5 stages, from Visits (12400) to Orders (840): 6.8% of the first stage remain. Stages, with the share of the stage before: Visits 12400; Product views 7300 (58.9%); Added to cart 2100 (28.8%); Checkout started 1250 (59.5%); Orders 840 (67.2%). The biggest drop is from Product views to Added to cart: 28.8% remain.</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-4e9debc21b4d0dbf .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-4e9debc21b4d0dbf .chartlet-label,#chartlet-4e9debc21b4d0dbf .chartlet-tick,#chartlet-4e9debc21b4d0dbf .chartlet-value,#chartlet-4e9debc21b4d0dbf .chartlet-value-inverse,#chartlet-4e9debc21b4d0dbf .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-4e9debc21b4d0dbf .chartlet-value,#chartlet-4e9debc21b4d0dbf .chartlet-value-inverse{font-weight:600}#chartlet-4e9debc21b4d0dbf .chartlet-value{fill:var(--chartlet-text)}#chartlet-4e9debc21b4d0dbf .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-4e9debc21b4d0dbf .chartlet-axis-title{font-weight:600}#chartlet-4e9debc21b4d0dbf .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-4e9debc21b4d0dbf .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-4e9debc21b4d0dbf .chartlet-bar,#chartlet-4e9debc21b4d0dbf .chartlet-point{fill:var(--chartlet-accent)}#chartlet-4e9debc21b4d0dbf .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-4e9debc21b4d0dbf .chartlet-background{fill:var(--chartlet-background)}#chartlet-4e9debc21b4d0dbf .chartlet-funnel-bar{fill:var(--chartlet-color-1);stroke:none}#chartlet-4e9debc21b4d0dbf .chartlet-funnel-rate{font-size:12px;font-weight:600;fill:var(--chartlet-text)}#chartlet-4e9debc21b4d0dbf .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}</style><rect x="139.96" y="12" width="555.56" height="44" class="chartlet-funnel-bar"><title>Visits: 12400</title></rect><text x="131.96" y="38" text-anchor="end" class="chartlet-label">Visits</text><text x="736" y="38" text-anchor="end" class="chartlet-label">12400</text><rect x="254.208" y="76" width="327.064" height="44" class="chartlet-funnel-bar"><title>Product views: 7300 (58.9% of the stage before)</title></rect><text x="131.96" y="102" text-anchor="end" class="chartlet-label">Product views</text><text x="736" y="102" text-anchor="end" class="chartlet-label">7300</text><rect x="370.697" y="140" width="94.087" height="44" class="chartlet-funnel-bar"><title>Added to cart: 2100 (28.8% of the stage before)</title></rect><text x="131.96" y="166" text-anchor="end" class="chartlet-label">Added to cart</text><text x="736" y="166" text-anchor="end" class="chartlet-label">2100</text><rect x="389.738" y="204" width="56.004" height="44" class="chartlet-funnel-bar"><title>Checkout started: 1250 (59.5% of the stage before)</title></rect><text x="131.96" y="230" text-anchor="end" class="chartlet-label">Checkout started</text><text x="736" y="230" text-anchor="end" class="chartlet-label">1250</text><rect x="398.923" y="268" width="37.635" height="44" class="chartlet-funnel-bar"><title>Orders: 840 (67.2% of the stage before)</title></rect><text x="131.96" y="294" text-anchor="end" class="chartlet-label">Orders</text><text x="736" y="294" text-anchor="end" class="chartlet-label">840</text><text x="417.74" y="70" text-anchor="middle" class="chartlet-funnel-rate">58.9%</text><text x="417.74" y="134" text-anchor="middle" class="chartlet-funnel-rate">28.8%</text><text x="417.74" y="198" text-anchor="middle" class="chartlet-funnel-rate">59.5%</text><text x="417.74" y="262" text-anchor="middle" class="chartlet-funnel-rate">67.2%</text><text x="24" y="336" text-anchor="start" class="chartlet-legend">Between the bars: the share kept from the stage before.</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="420" viewBox="0 0 380 420" id="chartlet-4e9debc21b4d0dbf-m" role="img" aria-labelledby="chartlet-4e9debc21b4d0dbf-m-title chartlet-4e9debc21b4d0dbf-m-description" class="chartlet-root"><title id="chartlet-4e9debc21b4d0dbf-m-title">From visit to order</title><desc id="chartlet-4e9debc21b4d0dbf-m-description">Funnel of 5 stages, from Visits (12400) to Orders (840): 6.8% of the first stage remain. Stages, with the share of the stage before: Visits 12400; Product views 7300 (58.9%); Added to cart 2100 (28.8%); Checkout started 1250 (59.5%); Orders 840 (67.2%). The biggest drop is from Product views to Added to cart: 28.8% remain.</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-4e9debc21b4d0dbf-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-4e9debc21b4d0dbf-m .chartlet-label,#chartlet-4e9debc21b4d0dbf-m .chartlet-tick,#chartlet-4e9debc21b4d0dbf-m .chartlet-value,#chartlet-4e9debc21b4d0dbf-m .chartlet-value-inverse,#chartlet-4e9debc21b4d0dbf-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-4e9debc21b4d0dbf-m .chartlet-value,#chartlet-4e9debc21b4d0dbf-m .chartlet-value-inverse{font-weight:600}#chartlet-4e9debc21b4d0dbf-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-4e9debc21b4d0dbf-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-4e9debc21b4d0dbf-m .chartlet-axis-title{font-weight:600}#chartlet-4e9debc21b4d0dbf-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-4e9debc21b4d0dbf-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-4e9debc21b4d0dbf-m .chartlet-bar,#chartlet-4e9debc21b4d0dbf-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-4e9debc21b4d0dbf-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-4e9debc21b4d0dbf-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-4e9debc21b4d0dbf-m .chartlet-funnel-bar{fill:var(--chartlet-color-1);stroke:none}#chartlet-4e9debc21b4d0dbf-m .chartlet-funnel-rate{font-size:12px;font-weight:600;fill:var(--chartlet-text)}#chartlet-4e9debc21b4d0dbf-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-4e9debc21b4d0dbf-m .chartlet-title-small{font-size:18px}</style><rect x="127.96" y="12" width="199.56" height="44" class="chartlet-funnel-bar"><title>Visits: 12400</title></rect><text x="119.96" y="38" text-anchor="end" class="chartlet-label">Visits</text><text x="368" y="38" text-anchor="end" class="chartlet-label">12400</text><rect x="168.999" y="76" width="117.483" height="44" class="chartlet-funnel-bar"><title>Product views: 7300 (58.9% of the stage before)</title></rect><text x="119.96" y="102" text-anchor="end" class="chartlet-label">Product views</text><text x="368" y="102" text-anchor="end" class="chartlet-label">7300</text><rect x="210.842" y="140" width="33.796" height="44" class="chartlet-funnel-bar"><title>Added to cart: 2100 (28.8% of the stage before)</title></rect><text x="119.96" y="166" text-anchor="end" class="chartlet-label">Added to cart</text><text x="368" y="166" text-anchor="end" class="chartlet-label">2100</text><rect x="217.682" y="204" width="20.117" height="44" class="chartlet-funnel-bar"><title>Checkout started: 1250 (59.5% of the stage before)</title></rect><text x="119.96" y="230" text-anchor="end" class="chartlet-label">Checkout started</text><text x="368" y="230" text-anchor="end" class="chartlet-label">1250</text><rect x="220.981" y="268" width="13.519" height="44" class="chartlet-funnel-bar"><title>Orders: 840 (67.2% of the stage before)</title></rect><text x="119.96" y="294" text-anchor="end" class="chartlet-label">Orders</text><text x="368" y="294" text-anchor="end" class="chartlet-label">840</text><text x="227.74" y="70" text-anchor="middle" class="chartlet-funnel-rate">58.9%</text><text x="227.74" y="134" text-anchor="middle" class="chartlet-funnel-rate">28.8%</text><text x="227.74" y="198" text-anchor="middle" class="chartlet-funnel-rate">59.5%</text><text x="227.74" y="262" text-anchor="middle" class="chartlet-funnel-rate">67.2%</text><text x="12" y="336" text-anchor="start" class="chartlet-legend">Between the bars: the share kept from the stage before.</text></svg></div><p class="chartlet-source">Source: Illustrative shop data, one month</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for From visit to order</caption><thead><tr><th scope="col">Stage</th><th scope="col">Value</th><th scope="col">Share</th><th scope="col">Rate</th></tr></thead><tbody><tr><th scope="row">Visits</th><td>12400</td><td>100.0%</td><td></td></tr><tr><th scope="row">Product views</th><td>7300</td><td>58.9%</td><td>58.9%</td></tr><tr><th scope="row">Added to cart</th><td>2100</td><td>16.9%</td><td>28.8%</td></tr><tr><th scope="row">Checkout started</th><td>1250</td><td>10.1%</td><td>59.5%</td></tr><tr><th scope="row">Orders</th><td>840</td><td>6.8%</td><td>67.2%</td></tr></tbody></table></details></figure></div>