chartlet 0.22.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><fieldset class="chartlet-filter"><legend>Series</legend><label><input type="checkbox" class="series-0" checked> Email</label><label><input type="checkbox" class="series-1" checked> Chat</label><label><input type="checkbox" class="series-2" checked> Phone</label><label><input type="checkbox" class="series-3" checked> Forum</label></fieldset><figure class="chartlet-figure" data-viz="chart"><figcaption>Ticket volume by channel, ranked per quarter</figcaption><div class="chartlet-variant-desktop"><svg xmlns="http://www.w3.org/2000/svg" width="720" height="400" viewBox="0 0 720 400" id="chartlet-d975c46f541e47d2" role="img" aria-labelledby="chartlet-d975c46f541e47d2-title chartlet-d975c46f541e47d2-description" class="chartlet-root"><title id="chartlet-d975c46f541e47d2-title">Ticket volume by channel, ranked per quarter</title><desc id="chartlet-d975c46f541e47d2-description">Rank chart of 4 series in 4 categories from Q1 to Q4; rank 1 is the largest value. Ranks per category: Email: 1, 1, 2, 2; Chat: 2, 2, 1, 1; Phone: 3, 3, 3, 4; Forum: 4, 4, 4, 3. Largest rise in rank: Chat (2 → 1). Largest fall in rank: Email (1 → 2).</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-d975c46f541e47d2 .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d975c46f541e47d2 .chartlet-label,#chartlet-d975c46f541e47d2 .chartlet-tick,#chartlet-d975c46f541e47d2 .chartlet-value,#chartlet-d975c46f541e47d2 .chartlet-value-inverse,#chartlet-d975c46f541e47d2 .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d975c46f541e47d2 .chartlet-value,#chartlet-d975c46f541e47d2 .chartlet-value-inverse{font-weight:600}#chartlet-d975c46f541e47d2 .chartlet-value{fill:var(--chartlet-text)}#chartlet-d975c46f541e47d2 .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-d975c46f541e47d2 .chartlet-axis-title{font-weight:600}#chartlet-d975c46f541e47d2 .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d975c46f541e47d2 .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-d975c46f541e47d2 .chartlet-bar,#chartlet-d975c46f541e47d2 .chartlet-point{fill:var(--chartlet-accent)}#chartlet-d975c46f541e47d2 .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-d975c46f541e47d2 .chartlet-background{fill:var(--chartlet-background)}#chartlet-d975c46f541e47d2 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d975c46f541e47d2 .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2 .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2 .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2 .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}#chartlet-d975c46f541e47d2 .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d975c46f541e47d2 .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2 .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2 .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2 .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-d975c46f541e47d2 .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2 .chartlet-hit{fill:transparent;stroke:none}#chartlet-d975c46f541e47d2 .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-d975c46f541e47d2 .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2 .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2 .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2 .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-d975c46f541e47d2 .chartlet-hatch{stroke:none}#chartlet-d975c46f541e47d2 .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-d975c46f541e47d2 .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-d975c46f541e47d2 .chartlet-line-thin{stroke-width:1}#chartlet-d975c46f541e47d2 .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2 .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2 .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-d975c46f541e47d2 .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-d975c46f541e47d2 .chartlet-rule-label{font-size:12px;font-weight:600;fill:var(--chartlet-text);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-d975c46f541e47d2 .chartlet-area{stroke:none;fill-opacity:.18}#chartlet-d975c46f541e47d2 .chartlet-line-dashed{stroke-dasharray:7 5}#chartlet-d975c46f541e47d2 .chartlet-line-dotted{stroke-dasharray:0 7}#chartlet-d975c46f541e47d2 .chartlet-line-thin.chartlet-line-dotted{stroke-dasharray:1 3}#chartlet-d975c46f541e47d2 .chartlet-line-bold{stroke-width:4.5}#chartlet-d975c46f541e47d2.chartlet-multiples .chartlet-line-bold{stroke-width:3}</style><line x1="98.12" y1="40" x2="98.12" y2="384" class="chartlet-grid"/><text x="98.12" y="30" text-anchor="middle" class="chartlet-label">Q1</text><line x1="272.707" y1="40" x2="272.707" y2="384" class="chartlet-grid"/><text x="272.707" y="30" text-anchor="middle" class="chartlet-label">Q2</text><line x1="447.293" y1="40" x2="447.293" y2="384" class="chartlet-grid"/><text x="447.293" y="30" text-anchor="middle" class="chartlet-label">Q3</text><line x1="621.88" y1="40" x2="621.88" y2="384" class="chartlet-grid"/><text x="621.88" y="30" text-anchor="middle" class="chartlet-label">Q4</text><polyline data-series="0" points="98.12,48 272.707,48 447.293,157.333 621.88,157.333" class="chartlet-line chartlet-line-series-1"/><circle data-series="0" cx="98.12" cy="48" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q1: Rank 1 (820)</title></circle><circle data-series="0" cx="272.707" cy="48" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q2: Rank 1 (780)</title></circle><circle data-series="0" cx="447.293" cy="157.333" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q3: Rank 2 (700)</title></circle><circle data-series="0" cx="621.88" cy="157.333" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q4: Rank 2 (650)</title></circle><polyline data-series="1" points="98.12,157.333 272.707,157.333 447.293,48 621.88,48" class="chartlet-line chartlet-line-series-2 chartlet-line-dashed"/><circle data-series="1" cx="98.12" cy="157.333" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q1: Rank 2 (610)</title></circle><circle data-series="1" cx="272.707" cy="157.333" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q2: Rank 2 (700)</title></circle><circle data-series="1" cx="447.293" cy="48" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q3: Rank 1 (790)</title></circle><circle data-series="1" cx="621.88" cy="48" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q4: Rank 1 (860)</title></circle><polyline data-series="2" points="98.12,266.667 272.707,266.667 447.293,266.667 621.88,376" class="chartlet-line chartlet-line-series-3 chartlet-line-dotted"/><circle data-series="2" cx="98.12" cy="266.667" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q1: Rank 3 (540)</title></circle><circle data-series="2" cx="272.707" cy="266.667" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q2: Rank 3 (520)</title></circle><circle data-series="2" cx="447.293" cy="266.667" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q3: Rank 3 (560)</title></circle><circle data-series="2" cx="621.88" cy="376" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q4: Rank 4 (530)</title></circle><polyline data-series="3" points="98.12,376 272.707,376 447.293,376 621.88,266.667" class="chartlet-line chartlet-line-series-4 chartlet-line-thin"/><circle data-series="3" cx="98.12" cy="376" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q1: Rank 4 (300)</title></circle><circle data-series="3" cx="272.707" cy="376" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q2: Rank 4 (340)</title></circle><circle data-series="3" cx="447.293" cy="376" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q3: Rank 4 (410)</title></circle><circle data-series="3" cx="621.88" cy="266.667" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q4: Rank 3 (590)</title></circle><text x="88.12" y="52" text-anchor="end" class="chartlet-label">Email  #1</text><text x="88.12" y="161.333" text-anchor="end" class="chartlet-label">Chat  #2</text><text x="88.12" y="270.667" text-anchor="end" class="chartlet-label">Phone  #3</text><text x="88.12" y="380" text-anchor="end" class="chartlet-label">Forum  #4</text><text x="631.88" y="161.333" text-anchor="start" class="chartlet-label">#2  Email</text><text x="631.88" y="52" text-anchor="start" class="chartlet-label">#1  Chat</text><text x="631.88" y="380" text-anchor="start" class="chartlet-label">#4  Phone</text><text x="631.88" y="270.667" text-anchor="start" class="chartlet-label">#3  Forum</text></svg></div><div class="chartlet-variant-mobile"><svg xmlns="http://www.w3.org/2000/svg" width="380" height="460" viewBox="0 0 380 460" id="chartlet-d975c46f541e47d2-m" role="img" aria-labelledby="chartlet-d975c46f541e47d2-m-title chartlet-d975c46f541e47d2-m-description" class="chartlet-root"><title id="chartlet-d975c46f541e47d2-m-title">Ticket volume by channel, ranked per quarter</title><desc id="chartlet-d975c46f541e47d2-m-description">Rank chart of 4 series in 4 categories from Q1 to Q4; rank 1 is the largest value. Ranks per category: Email: 1, 1, 2, 2; Chat: 2, 2, 1, 1; Phone: 3, 3, 3, 4; Forum: 4, 4, 4, 3. Largest rise in rank: Chat (2 → 1). Largest fall in rank: Email (1 → 2).</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-d975c46f541e47d2-m .chartlet-title{font-size:22px;font-weight:650;fill:var(--chartlet-text)}#chartlet-d975c46f541e47d2-m .chartlet-label,#chartlet-d975c46f541e47d2-m .chartlet-tick,#chartlet-d975c46f541e47d2-m .chartlet-value,#chartlet-d975c46f541e47d2-m .chartlet-value-inverse,#chartlet-d975c46f541e47d2-m .chartlet-axis-title{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d975c46f541e47d2-m .chartlet-value,#chartlet-d975c46f541e47d2-m .chartlet-value-inverse{font-weight:600}#chartlet-d975c46f541e47d2-m .chartlet-value{fill:var(--chartlet-text)}#chartlet-d975c46f541e47d2-m .chartlet-value-inverse{fill:var(--chartlet-background)}#chartlet-d975c46f541e47d2-m .chartlet-axis-title{font-weight:600}#chartlet-d975c46f541e47d2-m .chartlet-grid{stroke:var(--chartlet-grid);stroke-width:1}#chartlet-d975c46f541e47d2-m .chartlet-zero{stroke:var(--chartlet-zero);stroke-width:1.5}#chartlet-d975c46f541e47d2-m .chartlet-bar,#chartlet-d975c46f541e47d2-m .chartlet-point{fill:var(--chartlet-accent)}#chartlet-d975c46f541e47d2-m .chartlet-line{fill:none;stroke:var(--chartlet-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}#chartlet-d975c46f541e47d2-m .chartlet-background{fill:var(--chartlet-background)}#chartlet-d975c46f541e47d2-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d975c46f541e47d2-m .chartlet-series-1{fill:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2-m .chartlet-series-2{fill:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2-m .chartlet-series-3{fill:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2-m .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}#chartlet-d975c46f541e47d2-m .chartlet-legend{font-size:12px;fill:var(--chartlet-muted)}#chartlet-d975c46f541e47d2-m .chartlet-line-series-1{stroke:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2-m .chartlet-line-series-2{stroke:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2-m .chartlet-line-series-3{stroke:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2-m .chartlet-line-series-4{stroke:var(--chartlet-color-4)}#chartlet-d975c46f541e47d2-m .chartlet-point-series-1{fill:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2-m .chartlet-hit{fill:transparent;stroke:none}#chartlet-d975c46f541e47d2-m .chartlet-band{stroke:none;fill-opacity:.18}#chartlet-d975c46f541e47d2-m .chartlet-band-series-1{fill:var(--chartlet-color-1)}#chartlet-d975c46f541e47d2-m .chartlet-band-series-2{fill:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2-m .chartlet-band-series-3{fill:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2-m .chartlet-band-series-4{fill:var(--chartlet-color-4)}#chartlet-d975c46f541e47d2-m .chartlet-hatch{stroke:none}#chartlet-d975c46f541e47d2-m .chartlet-hatch-line{stroke-width:1.2;opacity:.75}#chartlet-d975c46f541e47d2-m .chartlet-line-modeled{stroke-dasharray:7 5}#chartlet-d975c46f541e47d2-m .chartlet-line-thin{stroke-width:1}#chartlet-d975c46f541e47d2-m .chartlet-point-series-2{fill:var(--chartlet-color-2)}#chartlet-d975c46f541e47d2-m .chartlet-point-series-3{fill:var(--chartlet-color-3)}#chartlet-d975c46f541e47d2-m .chartlet-point-series-4{fill:var(--chartlet-color-4)}#chartlet-d975c46f541e47d2-m .chartlet-rule{fill:none;stroke:var(--chartlet-zero);stroke-width:1.5;stroke-dasharray:5 4}#chartlet-d975c46f541e47d2-m .chartlet-rule-label{font-size:12px;font-weight:600;fill:var(--chartlet-text);paint-order:stroke;stroke:var(--chartlet-background);stroke-width:3px;stroke-linejoin:round}#chartlet-d975c46f541e47d2-m .chartlet-area{stroke:none;fill-opacity:.18}#chartlet-d975c46f541e47d2-m .chartlet-line-dashed{stroke-dasharray:7 5}#chartlet-d975c46f541e47d2-m .chartlet-line-dotted{stroke-dasharray:0 7}#chartlet-d975c46f541e47d2-m .chartlet-line-thin.chartlet-line-dotted{stroke-dasharray:1 3}#chartlet-d975c46f541e47d2-m .chartlet-line-bold{stroke-width:4.5}#chartlet-d975c46f541e47d2-m.chartlet-multiples .chartlet-line-bold{stroke-width:3}#chartlet-d975c46f541e47d2-m .chartlet-title-small{font-size:18px}</style><line x1="86.12" y1="40" x2="86.12" y2="444" class="chartlet-grid"/><text x="86.12" y="30" text-anchor="middle" class="chartlet-label">Q1</text><line x1="155.373" y1="40" x2="155.373" y2="444" class="chartlet-grid"/><text x="155.373" y="30" text-anchor="middle" class="chartlet-label">Q2</text><line x1="224.627" y1="40" x2="224.627" y2="444" class="chartlet-grid"/><text x="224.627" y="30" text-anchor="middle" class="chartlet-label">Q3</text><line x1="293.88" y1="40" x2="293.88" y2="444" class="chartlet-grid"/><text x="293.88" y="30" text-anchor="middle" class="chartlet-label">Q4</text><polyline data-series="0" points="86.12,48 155.373,48 224.627,177.333 293.88,177.333" class="chartlet-line chartlet-line-series-1"/><circle data-series="0" cx="86.12" cy="48" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q1: Rank 1 (820)</title></circle><circle data-series="0" cx="155.373" cy="48" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q2: Rank 1 (780)</title></circle><circle data-series="0" cx="224.627" cy="177.333" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q3: Rank 2 (700)</title></circle><circle data-series="0" cx="293.88" cy="177.333" r="4" class="chartlet-point chartlet-point-series-1"><title>Email, Q4: Rank 2 (650)</title></circle><polyline data-series="1" points="86.12,177.333 155.373,177.333 224.627,48 293.88,48" class="chartlet-line chartlet-line-series-2 chartlet-line-dashed"/><circle data-series="1" cx="86.12" cy="177.333" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q1: Rank 2 (610)</title></circle><circle data-series="1" cx="155.373" cy="177.333" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q2: Rank 2 (700)</title></circle><circle data-series="1" cx="224.627" cy="48" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q3: Rank 1 (790)</title></circle><circle data-series="1" cx="293.88" cy="48" r="4" class="chartlet-point chartlet-point-series-2"><title>Chat, Q4: Rank 1 (860)</title></circle><polyline data-series="2" points="86.12,306.667 155.373,306.667 224.627,306.667 293.88,436" class="chartlet-line chartlet-line-series-3 chartlet-line-dotted"/><circle data-series="2" cx="86.12" cy="306.667" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q1: Rank 3 (540)</title></circle><circle data-series="2" cx="155.373" cy="306.667" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q2: Rank 3 (520)</title></circle><circle data-series="2" cx="224.627" cy="306.667" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q3: Rank 3 (560)</title></circle><circle data-series="2" cx="293.88" cy="436" r="4" class="chartlet-point chartlet-point-series-3"><title>Phone, Q4: Rank 4 (530)</title></circle><polyline data-series="3" points="86.12,436 155.373,436 224.627,436 293.88,306.667" class="chartlet-line chartlet-line-series-4 chartlet-line-thin"/><circle data-series="3" cx="86.12" cy="436" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q1: Rank 4 (300)</title></circle><circle data-series="3" cx="155.373" cy="436" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q2: Rank 4 (340)</title></circle><circle data-series="3" cx="224.627" cy="436" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q3: Rank 4 (410)</title></circle><circle data-series="3" cx="293.88" cy="306.667" r="4" class="chartlet-point chartlet-point-series-4"><title>Forum, Q4: Rank 3 (590)</title></circle><text x="76.12" y="52" text-anchor="end" class="chartlet-label">Email  #1</text><text x="76.12" y="181.333" text-anchor="end" class="chartlet-label">Chat  #2</text><text x="76.12" y="310.667" text-anchor="end" class="chartlet-label">Phone  #3</text><text x="76.12" y="440" text-anchor="end" class="chartlet-label">Forum  #4</text><text x="303.88" y="181.333" text-anchor="start" class="chartlet-label">#2  Email</text><text x="303.88" y="52" text-anchor="start" class="chartlet-label">#1  Chat</text><text x="303.88" y="440" text-anchor="start" class="chartlet-label">#4  Phone</text><text x="303.88" y="310.667" text-anchor="start" class="chartlet-label">#3  Forum</text></svg></div><p class="chartlet-source">Source: Illustrative counts; rank 1 is the busiest channel</p><details class="chartlet-data" data-viz-text><summary>Show chart data</summary><table><caption>Data for Ticket volume by channel, ranked per quarter</caption><thead><tr><th scope="col">Category</th><th scope="col">Email</th><th scope="col">Chat</th><th scope="col">Phone</th><th scope="col">Forum</th></tr></thead><tbody><tr><th scope="row">Q1</th><td>820</td><td>610</td><td>540</td><td>300</td></tr><tr><th scope="row">Q2</th><td>780</td><td>700</td><td>520</td><td>340</td></tr><tr><th scope="row">Q3</th><td>700</td><td>790</td><td>560</td><td>410</td></tr><tr><th scope="row">Q4</th><td>650</td><td>860</td><td>530</td><td>590</td></tr></tbody></table></details></figure></div>