Funnel chart
chart.funnel
Overview
Send 2..100 ordered exact-decimal stages. The chart preserves declared order, keeps increases visible, computes previous and first conversion without NaN or Infinity, and emits deterministic centered trapezoids. Host behavior is bounded to 64 stages and never silently falls back. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance.
Ordered process ratios need exact denominator rules and increases must not be misrepresented as negative loss.
Reliability
You provide ordered bounded stages; we preserve their identity and produce deterministic exact-decimal results. Declared failures: CHART_CAPACITY_EXCEEDED — trigger: the requested stage count cannot fit legibly in the canvas; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details. CHART_BEHAVIOR_CAPACITY_EXCEEDED — trigger: see the error details for this code; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details. CHART_OUTPUT_TOO_LARGE — trigger: the inline SVG byte budget would be exceeded at the requested size and data density; retryable: no; unchanged input: will not succeed; next: follow the recovery intent in the error details. CHART_UNSAFE_OUTPUT — trigger: the finished SVG failed our final safety re-validation (this is on us, not your data); retryable: no; unchanged input: will not succeed; next: contact support with the request id — retrying the same input will not help.
Context footprint
Prefer descriptor.contractSections.recommendedRendering. Pass output.behavior.artifact unchanged to SquillifyChartRuntime.mount; resolve artifact.runtimeRequirement and every resourceRequirements item first. motionPlan.requiredRuntime is not a resolver input. Supports 2..100 stages statically and 2..64 with host behavior. A successful call costs 5 execution credits.
When to use it
When every stage has one declared predecessor in a single ordered process.
When the data branches, cycles, or has no meaningful stage order.
Scope
Non-goals
- Reorderable stages
- Legend filtering
- Flow simulation
Properties
Capabilities
Cost & billing
Flat rate per invocation
File handling
How we handle your data
What this means
This skill may receive sensitive content and may return submitted, transformed, extracted, or reformatted content.
Squillify guarantees
- Runs inside Squillify
- This skill runs inside Squillify.
- Payloads are not sent to an external service by this skill.
- Squillify does not permanently store submitted payloads.
- Telemetry records metadata only, not submitted content.
- Submitted payloads are not used for training.
- Submitted payloads are not reviewed by humans.
- This skill does not target sensitive data.
- The response may contain submitted or transformed content.
Your responsibility
Squillify does not determine whether submitted content is sensitive. Your application is responsible for deciding what data it is allowed to submit. Your application is responsible for securing the response.
Input schema
| Field | Type | Required | Description |
|---|---|---|---|
| data | object | Yes | Required closed object with 2..100 ordered stages. Each stage has id, label, non-negative exact-decimal string value, and optional absolute target. |
| options | object | No | Closed orientation, width encoding, conversion basis, increase policy, labels, neck, line|gap|none separation, deterministic valueFormat/conversionFormat, and previousConversion|firstConversion thresholds. When omitted, the chart uses vertical, relative, previous-conversion, warning, outside-label and two-decimal display defaults; conversion labels include %. |
| localization | object | No | Optional closed locale selection for deterministic visible number formatting; defaults to en and accepts only the frozen locale registry. |
| behavior | object | No | Optional bounded host motion and interaction request. Interactive requests admit at most 64 stages and publish stage plus transition targets. When omitted, the result is static SVG only. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance. |
| title | string | No | Visible bounded title; omission reserves no title space. |
| subtitle | string | No | Visible bounded subtitle; omission reserves no subtitle space. |
| accessibility | object | No | Closed optional object: title and description are strings limited to 256 code points. When omitted, we generate the accessible name and ordered stage summary. |
| layout | object | No | Optional closed object: margin is auto, a 0..1000 integer, or {top,right,bottom,left}; plotPadding is a 0..200 integer or the same four-sided object; insufficientSpace is reject. When omitted, it uses automatic margins, profile padding, and reject-on-insufficient-space. |
| width | integer | No | Canvas width in pixels, 100..1600 (optional; default 800). Outside that range the request is refused as invalid input rather than clamped. The ceiling is the size a chart is read at — a full-HD dashboard or a report page; beyond it the canvas stops being what limits how much fits, and type sized for the canvas is illegible once the export is displayed smaller. It applies per side, so a tall portrait canvas for a long horizontal ranking is allowed. |
| height | integer | No | Canvas height in pixels, 100..1600 (optional; default 480). Outside that range the request is refused as invalid input rather than clamped. The ceiling is the size a chart is read at — a full-HD dashboard or a report page; beyond it the canvas stops being what limits how much fits, and type sized for the canvas is illegible once the export is displayed smaller. It applies per side, so a tall portrait canvas for a long horizontal ranking is allowed. |
| theme | string | No | Visual language: basic, modern or squillify (optional; default squillify). An unregistered value is rejected with the registered names listed — we never substitute silently. |
| surface | string | No | Surface the theme renders on: dark or light (optional; default light). |
| density | string | No | How tightly the chrome is packed: compact, standard or spacious (optional; default standard). Density scales spacing only — it never lowers a legibility minimum. |
| visualProfile | string | No | What the SVG promises about the host font: portable or certified (optional; default portable). The default is layout-deterministic and tolerates substitution; certified refuses text the certified metrics cannot fully measure. |
| style | object | No | Optional bounded paint and typography styling; omit it to use the selected theme defaults. text.size is expressed in normalized design pixels at an 800-pixel reference width, so equivalent roles match at equal CSS width. It never changes data or accessibility. 'contract' selects the published semantics. 'tokens' sets design tokens; 'rules' applies typed properties to a role and optional series/category facets; 'palette' accepts a digest-checked palette; 'css' is a bounded post-layout stylesheet. The styleCapabilities section publishes this family's accepted roles, properties and copyable examples. For Bar, target one mark with role 'bar' plus seriesIndex and categoryIndex; categoryIndex alone targets that category across series. A minimal rule is {"target":{"role":"bar"},"set":{"paint.fill":"#2563eb"}}. Unsupported typed rules are refused; unsupported CSS is dropped and reported. Do not discover the grammar through trial calls: style validation failures are currently billable. Before calling, read this contract's styleSurface and styleCapabilities sections for the complete rule shape, accepted roles and properties, limits, and copyable examples. |
| output | object | No | Output scoping (optional). Nested key output.idNamespace ([a-z][a-z0-9-]{0,31}) is prefixed onto every generated element id when several charts share one host document; omit for a standalone chart. An invalid namespace is rejected. |
Output schema
| Field | Type | Required | Description |
|---|---|---|---|
| svg | string | Yes | Final script-free canonical SVG. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance. |
| width | integer | Yes | Rendered canvas width in CSS pixels. |
| height | integer | Yes | Rendered canvas height in CSS pixels. |
| viewBox | string | Yes | Rendered SVG coordinate system in min-x min-y width height form. |
| stageResults | array | Yes | Exact bounded per-stage conversion, retention, loss, increase and target results. |
| behavior | object | No | Host manifest, data index, digest-bound artifact and transition recipe when requested. svg is a complete static, script-free chart. Mark highlight, the dotted guide, and the value panel are not in that SVG, and entry motion, focus, and updates stay inactive there. Pass the entire output.behavior.artifact unchanged to SquillifyChartRuntime.mount(container, artifact, options), then call the returned handle's replay() once to play the entry. A later value change uses update(nextArtifact, {intent}). Injecting svg directly leaves hover and motion off. Interaction is on by default for every host chart: after mount, pointer and keyboard focus open the value panel and the dotted guide. Set behavior.interaction.enabled to false to turn that off. motion.preset accepts only the family's entrance. |
| styleReport | object | No | Always reports the resolved typographyProfile and fontMetrics contract, plus tokensApplied, rulesApplied, typedRulesApplied, typedAssignmentsApplied, rulesDropped, declarationsDropped and, when anything was dropped, a bounded list of reasons. |
| warnings | array | No | Present when the render succeeded with a known degradation. Each entry is an object with a stable code, a message and details. Every chart can emit FONT_SUBSTITUTION_POSSIBLE under visualProfile 'portable', FONT_GLYPH_UNMEASURED when a code point falls outside the certified metrics, and CHART_STYLE_PARTIALLY_APPLIED when part of your styling was dropped — styleReport then names which part and why. Codes are stable for agent routing. |
API contract
POST /v1/executecurl -sS -X POST "$BASE/v1/execute" \
-H "Authorization: Bearer $KEY" -H "Content-Type: application/json" \
-d '{"skillKey":"chart.funnel","input":{"data":{"stages":[{"id":"visits","label":"Visits","value":"10000"},{"id":"trials","label":"Trials","value":"2400"}]},"title":"Acquisition funnel","behavior":{"motion":{"enabled":true,"preset":"enter_stages","reducedMotion":"respect"},"interaction":{"enabled":true,"capabilities":["focus_stage","focus_transition","trace_to_stage"]}}}}'import { Squillify } from "@squillify/sdk";
const sq = new Squillify({ apiKey: process.env.SQUILLIFY_API_KEY });
const { output } = await sq.execute("chart.funnel", {"title":"Acquisition funnel","data":{"stages":[{"id":"visits","label":"Visits","value":"10000"},{"id":"trials","label":"Trials","value":"2400"},{"id":"paid","label":"Paid","value":"900"}]}});Errors
| Code | HTTP | Retryable | Description |
|---|---|---|---|
| VALIDATION_ERROR | 400 | No | The request payload failed schema validation. |
| UNAUTHORIZED | 401 | No | Missing or invalid API key. |
| SKILL_NOT_ACCESSIBLE | 403 | No | The API key is not granted access to this skill. |
| SKILL_NOT_AVAILABLE_FOR_PLAN | 403 | No | This skill is not included in your current plan. |
| PLAN_ELIGIBILITY_UNAVAILABLE | 503 | Yes | Plan eligibility could not be decided. Retry after backoff. |
| SKILL_NOT_FOUND | 404 | No | The requested skill or version does not exist. |
| TENANT_RATE_LIMITED | 429 | Yes | Request rate limit exceeded. Retry after backoff. |
| QUOTA_EXCEEDED | 429 | Yes | Plan quota exhausted. Retryable once the quota period resets. |
| EXECUTION_TIMEOUT | 504 | Yes | Execution exceeded the allowed time budget. |
| CHART_CAPACITY_EXCEEDED | 429 | No | A size, quota, rate, or time limit was exceeded. |
| CHART_BEHAVIOR_CAPACITY_EXCEEDED | 429 | No | A size, quota, rate, or time limit was exceeded. |
| CHART_OUTPUT_TOO_LARGE | 429 | No | A size, quota, rate, or time limit was exceeded. |
| CHART_UNSAFE_OUTPUT | 500 | No | The skill encountered an unexpected execution failure. |
Other limits
| Limit | Value |
|---|---|
| Recommended inline bytes | 32 KiB |
Limitations
- Reorderable stages
- Legend filtering
- Flow simulation
- Branching flows (use chart.sankey)
- Unordered categories (use chart.bar)
- More than 64 interactive stages
How to call
POST /v1/execute (requires authentication)
{
"skillKey": "chart.funnel",
"input": {
"title": "Acquisition funnel",
"data": {
"stages": [
{
"id": "visits",
"label": "Visits",
"value": "10000"
},
{
"id": "trials",
"label": "Trials",
"value": "2400"
},
{
"id": "paid",
"label": "Paid",
"value": "900"
}
]
}
}
}Examples
Acquisition funnel
{
"title": "Acquisition funnel",
"data": {
"stages": [
{
"id": "visits",
"label": "Visits",
"value": "10000"
},
{
"id": "trials",
"label": "Trials",
"value": "2400"
},
{
"id": "paid",
"label": "Paid",
"value": "900"
}
]
}
}{
"viewBox": "0 0 800 480",
"stageResults": [
{
"id": "visits",
"value": "10000",
"previousConversion": "notApplicable",
"firstConversion": "1",
"retained": "10000",
"loss": "0",
"increase": "0"
},
{
"id": "trials",
"value": "2400",
"previousConversion": "0.24",
"firstConversion": "0.24",
"retained": "2400",
"loss": "7600",
"increase": "0"
},
{
"id": "paid",
"value": "900",
"previousConversion": "0.375",
"firstConversion": "0.09",
"retained": "900",
"loss": "1500",
"increase": "0"
}
],
"width": 800,
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"480\" viewBox=\"0 0 800 480\" role=\"img\" class=\"sq-chart sq-chart--funnel sq-family--process sq-theme--squillify sq-surface--light sq-density--standard\" data-sq-style-contract=\"CHART_STYLE@1\" data-sq-chart=\"funnel\" data-sq-family=\"process\" data-sq-theme=\"squillify\" data-sq-theme-version=\"1\" data-sq-surface=\"light\" data-sq-density=\"standard\" data-sq-a11y-detail=\"full\" aria-labelledby=\"sq-8c2732f7e20d-title-5 sq-8c2732f7e20d-desc-6\"><title id=\"sq-8c2732f7e20d-title-5\">Acquisition funnel</title><desc id=\"sq-8c2732f7e20d-desc-6\">Funnel in declared order: Visits 10,000.00; Trials 2,400.00 · prev 24.00%; Paid 900.00 · prev 37.50%</desc><style>.sq-chart{--sq-chart-axis:#c9d1df;--sq-chart-font-family:'Squillify Mono', 'IBM Plex Mono', monospace;--sq-chart-grid:#d8dee9;--sq-chart-surface:#ffffff;--sq-chart-text-muted:#667085;--sq-chart-text-primary:#101828;--sq-series-1:#2563eb;--sq-series-2:#6d5ce7;--sq-series-3:#168a5b;--sq-series-4:#c45412;--sq-series-5:#d92d20;--sq-series-6:#667085;font-family:var(--sq-chart-font-family);font-weight:500;}.sq-chart .sq-background{fill:var(--sq-chart-surface);}.sq-chart .sq-title{fill:var(--sq-chart-text-primary);}.sq-chart .sq-category-label{fill:var(--sq-chart-text-muted);}.sq-chart .sq-legend-label{fill:var(--sq-chart-text-primary);}.sq-chart .sq-contrast-text{fill:#ffffff;mix-blend-mode:difference;}</style><defs><linearGradient id=\"sq-8c2732f7e20d-fh-4\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0\" stop-color=\"#f0f5fe\"/><stop offset=\"0.54\" stop-color=\"#ffffff\"/></linearGradient><linearGradient id=\"sq-8c2732f7e20d-gradient-0\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#6f9bff\"/><stop offset=\"1\" stop-color=\"#c9d8ff\"/></linearGradient><linearGradient id=\"sq-8c2732f7e20d-gradient-1\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#a99cf8\"/><stop offset=\"1\" stop-color=\"#ded9ff\"/></linearGradient><linearGradient id=\"sq-8c2732f7e20d-gradient-2\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#54bc8b\"/><stop offset=\"1\" stop-color=\"#c8ebda\"/></linearGradient><linearGradient id=\"sq-8c2732f7e20d-gradient-3\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#426cad\"/><stop offset=\"1\" stop-color=\"#b7c8e3\"/></linearGradient></defs><rect x=\"0\" y=\"0\" width=\"800\" height=\"480\" fill=\"#ffffff\" class=\"sq-background\" data-sq-role=\"background\"/><rect x=\"0\" y=\"0\" width=\"800\" height=\"60\" fill=\"url(#sq-8c2732f7e20d-fh-4)\" class=\"sq-brand-band\"/><rect x=\"0\" y=\"60\" width=\"800\" height=\"420\" fill=\"#f8fafd\" class=\"sq-plot\" data-sq-role=\"plot\"/><line x1=\"0\" y1=\"60\" x2=\"800\" y2=\"60\" stroke=\"#c9d1df\" stroke-width=\"1\" class=\"sq-card-frame\"/><text x=\"12\" y=\"16\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"1.2\" textLength=\"87\" lengthAdjust=\"spacing\" fill=\"#2563eb\" class=\"sq-caption\" data-sq-role=\"caption\">FUNNEL CHART</text><text x=\"12\" y=\"43\" font-size=\"16\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"-0.32\" textLength=\"169\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-title\" data-sq-role=\"title\">Acquisition funnel</text><g class=\"sq-legend\" data-sq-role=\"legend\"><g class=\"sq-legend-item\"><g transform=\"translate(638.4 29.8) rotate(45)\"><rect x=\"-3.4\" y=\"-3.4\" width=\"6.8\" height=\"6.8\" fill=\"#426cad\" stroke=\"#1e4079\" stroke-width=\"0.8\" class=\"sq-legend-swatch\" data-sq-role=\"legend-swatch\" data-sq-series-index=\"0\"/></g><text x=\"649\" y=\"33.2\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"500\" textLength=\"139\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-legend-label\" data-sq-role=\"legend-label\" data-sq-series-index=\"0\">Width = retained volume</text></g></g><rect x=\"0.5\" y=\"0.5\" width=\"799\" height=\"479\" fill=\"none\" stroke=\"#c9d1df\" stroke-width=\"1\" class=\"sq-card-frame\"/><path d=\"M 15.0 71.0 L 438.50000000000006 71.0 L 277.57000000000005 197.33333333333334 L 175.93 197.33333333333334 Z\" fill=\"url(#sq-8c2732f7e20d-gradient-0)\" stroke=\"#2563eb\" stroke-width=\"1\" class=\"sq-flow-node\" data-sq-role=\"flow-node\" data-sq-target-key=\"t-stage-5a150e3181407adb\" data-sq-category-index=\"0\"/><text x=\"452.5\" y=\"130.167\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"0.3\" textLength=\"39\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-category-label\" data-sq-role=\"category-label\">Visits</text><text x=\"452.5\" y=\"146.167\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"500\" textLength=\"97\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">100.00% retained</text><text x=\"785\" y=\"130.167\" font-size=\"12\" text-anchor=\"end\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"66\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">10,000.00</text><text x=\"226.75\" y=\"137.567\" font-size=\"10\" text-anchor=\"middle\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"7\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-contrast-text\">1</text><line x1=\"175.93\" y1=\"200.333\" x2=\"277.57\" y2=\"200.333\" stroke=\"#c9d1df\" stroke-width=\"1\" class=\"sq-flow-link\" data-sq-role=\"flow-link\" data-sq-target-key=\"t-transition-6062b373d7645456\" data-sq-category-index=\"0\"/><path d=\"M 175.93 203.33333333333334 L 277.57000000000005 203.33333333333334 L 245.80750000000003 329.6666666666667 L 207.69250000000002 329.6666666666667 Z\" fill=\"url(#sq-8c2732f7e20d-gradient-1)\" stroke=\"#6d5ce7\" stroke-width=\"1\" class=\"sq-flow-node\" data-sq-role=\"flow-node\" data-sq-target-key=\"t-stage-c7399f6a8396882f\" data-sq-category-index=\"1\"/><text x=\"452.5\" y=\"262.5\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"0.3\" textLength=\"39\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-category-label\" data-sq-role=\"category-label\">Trials</text><text x=\"452.5\" y=\"278.5\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"500\" textLength=\"91\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">24.00% retained</text><text x=\"785\" y=\"262.5\" font-size=\"12\" text-anchor=\"end\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"59\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">2,400.00</text><text x=\"226.75\" y=\"269.9\" font-size=\"10\" text-anchor=\"middle\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"7\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-contrast-text\">2</text><line x1=\"207.693\" y1=\"332.667\" x2=\"245.808\" y2=\"332.667\" stroke=\"#c9d1df\" stroke-width=\"1\" class=\"sq-flow-link\" data-sq-role=\"flow-link\" data-sq-target-key=\"t-transition-35386bea231047fd\" data-sq-category-index=\"1\"/><path d=\"M 207.69250000000002 335.6666666666667 L 245.80750000000003 335.6666666666667 L 244.28290000000004 462.0 L 209.21710000000002 462.0 Z\" fill=\"url(#sq-8c2732f7e20d-gradient-3)\" stroke=\"#1e4079\" stroke-width=\"1\" class=\"sq-flow-node\" data-sq-role=\"flow-node\" data-sq-target-key=\"t-stage-27ba602743339404\" data-sq-category-index=\"2\"/><text x=\"452.5\" y=\"394.833\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"0.3\" textLength=\"26\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-category-label\" data-sq-role=\"category-label\">Paid</text><text x=\"452.5\" y=\"410.833\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"500\" textLength=\"85\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">9.00% retained</text><text x=\"785\" y=\"394.833\" font-size=\"12\" text-anchor=\"end\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"45\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">900.00</text><text x=\"226.75\" y=\"402.233\" font-size=\"10\" text-anchor=\"middle\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"7\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-contrast-text\">3</text></svg>",
"height": 480
}Increase remains an increase
{
"data": {
"stages": [
{
"id": "screened",
"label": "Screened",
"value": "310"
},
{
"id": "interviewed",
"label": "Interviewed",
"value": "340"
}
]
},
"options": {
"increasePolicy": "warn"
}
}{
"viewBox": "0 0 800 480",
"stageResults": [
{
"id": "screened",
"value": "310",
"previousConversion": "notApplicable",
"firstConversion": "1",
"retained": "310",
"loss": "0",
"increase": "0"
},
{
"id": "interviewed",
"value": "340",
"previousConversion": "1.0967741935483870967741935483870967742",
"firstConversion": "1.0967741935483870967741935483870967742",
"retained": "310",
"loss": "0",
"increase": "30"
}
],
"width": 800,
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"800\" height=\"480\" viewBox=\"0 0 800 480\" role=\"img\" class=\"sq-chart sq-chart--funnel sq-family--process sq-theme--squillify sq-surface--light sq-density--standard\" data-sq-style-contract=\"CHART_STYLE@1\" data-sq-chart=\"funnel\" data-sq-family=\"process\" data-sq-theme=\"squillify\" data-sq-theme-version=\"1\" data-sq-surface=\"light\" data-sq-density=\"standard\" data-sq-a11y-detail=\"full\" aria-labelledby=\"sq-b2a015fea316-title-5 sq-b2a015fea316-desc-6\"><title id=\"sq-b2a015fea316-title-5\">Funnel</title><desc id=\"sq-b2a015fea316-desc-6\">Funnel in declared order: Screened 310.00; Interviewed 340.00 · prev 109.68%</desc><style>.sq-chart{--sq-chart-axis:#c9d1df;--sq-chart-font-family:'Squillify Mono', 'IBM Plex Mono', monospace;--sq-chart-grid:#d8dee9;--sq-chart-surface:#ffffff;--sq-chart-text-muted:#667085;--sq-chart-text-primary:#101828;--sq-series-1:#2563eb;--sq-series-2:#6d5ce7;--sq-series-3:#168a5b;--sq-series-4:#c45412;--sq-series-5:#d92d20;--sq-series-6:#667085;font-family:var(--sq-chart-font-family);font-weight:500;}.sq-chart .sq-background{fill:var(--sq-chart-surface);}.sq-chart .sq-title{fill:var(--sq-chart-text-primary);}.sq-chart .sq-category-label{fill:var(--sq-chart-text-muted);}.sq-chart .sq-legend-label{fill:var(--sq-chart-text-primary);}.sq-chart .sq-contrast-text{fill:#ffffff;mix-blend-mode:difference;}</style><defs><linearGradient id=\"sq-b2a015fea316-fh-4\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0\" stop-color=\"#f0f5fe\"/><stop offset=\"0.54\" stop-color=\"#ffffff\"/></linearGradient><linearGradient id=\"sq-b2a015fea316-gradient-0\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#6f9bff\"/><stop offset=\"1\" stop-color=\"#c9d8ff\"/></linearGradient><linearGradient id=\"sq-b2a015fea316-gradient-1\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#a99cf8\"/><stop offset=\"1\" stop-color=\"#ded9ff\"/></linearGradient><linearGradient id=\"sq-b2a015fea316-gradient-2\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#54bc8b\"/><stop offset=\"1\" stop-color=\"#c8ebda\"/></linearGradient><linearGradient id=\"sq-b2a015fea316-gradient-3\" gradientUnits=\"objectBoundingBox\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\"><stop offset=\"0\" stop-color=\"#426cad\"/><stop offset=\"1\" stop-color=\"#b7c8e3\"/></linearGradient></defs><rect x=\"0\" y=\"0\" width=\"800\" height=\"480\" fill=\"#ffffff\" class=\"sq-background\" data-sq-role=\"background\"/><rect x=\"0\" y=\"0\" width=\"800\" height=\"60\" fill=\"url(#sq-b2a015fea316-fh-4)\" class=\"sq-brand-band\"/><rect x=\"0\" y=\"60\" width=\"800\" height=\"420\" fill=\"#f8fafd\" class=\"sq-plot\" data-sq-role=\"plot\"/><line x1=\"0\" y1=\"60\" x2=\"800\" y2=\"60\" stroke=\"#c9d1df\" stroke-width=\"1\" class=\"sq-card-frame\"/><text x=\"12\" y=\"16\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"1.2\" textLength=\"87\" lengthAdjust=\"spacing\" fill=\"#2563eb\" class=\"sq-caption\" data-sq-role=\"caption\">FUNNEL CHART</text><text x=\"12\" y=\"43\" font-size=\"16\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"-0.32\" textLength=\"57\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-title\" data-sq-role=\"title\">Funnel</text><g class=\"sq-legend\" data-sq-role=\"legend\"><g class=\"sq-legend-item\"><g transform=\"translate(638.4 29.8) rotate(45)\"><rect x=\"-3.4\" y=\"-3.4\" width=\"6.8\" height=\"6.8\" fill=\"#426cad\" stroke=\"#1e4079\" stroke-width=\"0.8\" class=\"sq-legend-swatch\" data-sq-role=\"legend-swatch\" data-sq-series-index=\"0\"/></g><text x=\"649\" y=\"33.2\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"500\" textLength=\"139\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-legend-label\" data-sq-role=\"legend-label\" data-sq-series-index=\"0\">Width = retained volume</text></g></g><rect x=\"0.5\" y=\"0.5\" width=\"799\" height=\"479\" fill=\"none\" stroke=\"#c9d1df\" stroke-width=\"1\" class=\"sq-card-frame\"/><path d=\"M 33.68382352941177 71.0 L 419.8161764705883 71.0 L 438.50000000000006 263.5 L 15.0 263.5 Z\" fill=\"url(#sq-b2a015fea316-gradient-0)\" stroke=\"#2563eb\" stroke-width=\"1\" class=\"sq-flow-node\" data-sq-role=\"flow-node\" data-sq-target-key=\"t-stage-b18b70dd8b50e3c7\" data-sq-category-index=\"0\"/><text x=\"452.5\" y=\"163.25\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"0.3\" textLength=\"52\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-category-label\" data-sq-role=\"category-label\">Screened</text><text x=\"452.5\" y=\"179.25\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"500\" textLength=\"97\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">100.00% retained</text><text x=\"785\" y=\"163.25\" font-size=\"12\" text-anchor=\"end\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"45\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">310.00</text><text x=\"226.75\" y=\"170.65\" font-size=\"10\" text-anchor=\"middle\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"7\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-contrast-text\">1</text><line x1=\"15\" y1=\"266.5\" x2=\"438.5\" y2=\"266.5\" stroke=\"#c9d1df\" stroke-width=\"1\" class=\"sq-flow-link\" data-sq-role=\"flow-link\" data-sq-target-key=\"t-transition-8274fefdbec96dad\" data-sq-category-index=\"0\"/><path d=\"M 15.0 269.5 L 438.50000000000006 269.5 L 421.56000000000006 462.0 L 31.939999999999998 462.0 Z\" fill=\"url(#sq-b2a015fea316-gradient-3)\" stroke=\"#1e4079\" stroke-width=\"1\" class=\"sq-flow-node\" data-sq-role=\"flow-node\" data-sq-target-key=\"t-stage-4bcab20ac2c9711b\" data-sq-category-index=\"1\"/><text x=\"452.5\" y=\"361.75\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" letter-spacing=\"0.3\" textLength=\"70\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-category-label\" data-sq-role=\"category-label\">Interviewed</text><text x=\"452.5\" y=\"377.75\" font-size=\"10\" text-anchor=\"start\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"500\" textLength=\"97\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">109.68% retained</text><text x=\"785\" y=\"361.75\" font-size=\"12\" text-anchor=\"end\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"45\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-value-label\" data-sq-role=\"value-label\">340.00</text><text x=\"226.75\" y=\"369.15\" font-size=\"10\" text-anchor=\"middle\" font-family=\"'Squillify Mono', 'IBM Plex Mono', monospace\" font-weight=\"600\" textLength=\"7\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-contrast-text\">2</text></svg>",
"height": 480
}Recommended use cases
- Use the published full rendering profile for the best result: Squillify styling, certified stage motion, focus/trace interactions and a mountable host artifact
- Show conversion through an ordered process
- Expose loss and increases between adjacent stages
- Compare previous-stage and first-stage conversion
Avoid for
- Branching flows (use chart.sankey)
- Unordered categories (use chart.bar)
- More than 64 interactive stages
Related skills
Composable with
Safety & privacy
- Runs without calling any external service.
- Your payloads are never stored permanently.
- Telemetry captures metadata only — never your payload contents.
- We never train models on your payloads.
- No human reviews your payloads.