Skip to main content

Squillify development is paused indefinitely. Read why, and discover what this experiment achieved. Read the story

MicroSkills Reference

Funnel chart

chart.funnel

ProductionBounded custom (Class B)Deterministicstrictmoderatev1.0.0
No network

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

Note
One ordered Funnel with exact conversion, retention, loss and increase arithmetic.

Non-goals

  • Reorderable stages
  • Legend filtering
  • Flow simulation

Properties

IdempotentRetry safeStreaming supportedFile input supportedRequires external service

Capabilities

generationimage-processing

Cost & billing

Flat rate per invocation

MetercallsBillable onsuccessCost per call5 credits

File handling

Accepts file_refProduces file_refMax input195.3 KB

How we handle your data

Sensitive output possible
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.

Read the Microskill Data Handling Policy

Input schema

FieldTypeRequiredDescription
dataobjectYesRequired closed object with 2..100 ordered stages. Each stage has id, label, non-negative exact-decimal string value, and optional absolute target.
optionsobjectNoClosed 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 %.
localizationobjectNoOptional closed locale selection for deterministic visible number formatting; defaults to en and accepts only the frozen locale registry.
behaviorobjectNoOptional 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.
titlestringNoVisible bounded title; omission reserves no title space.
subtitlestringNoVisible bounded subtitle; omission reserves no subtitle space.
accessibilityobjectNoClosed optional object: title and description are strings limited to 256 code points. When omitted, we generate the accessible name and ordered stage summary.
layoutobjectNoOptional 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.
widthintegerNoCanvas 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.
heightintegerNoCanvas 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.
themestringNoVisual language: basic, modern or squillify (optional; default squillify). An unregistered value is rejected with the registered names listed — we never substitute silently.
surfacestringNoSurface the theme renders on: dark or light (optional; default light).
densitystringNoHow tightly the chrome is packed: compact, standard or spacious (optional; default standard). Density scales spacing only — it never lowers a legibility minimum.
visualProfilestringNoWhat 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.
styleobjectNoOptional 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.
outputobjectNoOutput 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

FieldTypeRequiredDescription
svgstringYesFinal 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.
widthintegerYesRendered canvas width in CSS pixels.
heightintegerYesRendered canvas height in CSS pixels.
viewBoxstringYesRendered SVG coordinate system in min-x min-y width height form.
stageResultsarrayYesExact bounded per-stage conversion, retention, loss, increase and target results.
behaviorobjectNoHost 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.
styleReportobjectNoAlways reports the resolved typographyProfile and fontMetrics contract, plus tokensApplied, rulesApplied, typedRulesApplied, typedAssignmentsApplied, rulesDropped, declarationsDropped and, when anything was dropped, a bounded list of reasons.
warningsarrayNoPresent 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/execute
curl
curl -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"]}}}}'
Integrations
TypeScript SDK
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

CodeHTTPRetryableDescription
VALIDATION_ERROR400NoThe request payload failed schema validation.
UNAUTHORIZED401NoMissing or invalid API key.
SKILL_NOT_ACCESSIBLE403NoThe API key is not granted access to this skill.
SKILL_NOT_AVAILABLE_FOR_PLAN403NoThis skill is not included in your current plan.
PLAN_ELIGIBILITY_UNAVAILABLE503YesPlan eligibility could not be decided. Retry after backoff.
SKILL_NOT_FOUND404NoThe requested skill or version does not exist.
TENANT_RATE_LIMITED429YesRequest rate limit exceeded. Retry after backoff.
QUOTA_EXCEEDED429YesPlan quota exhausted. Retryable once the quota period resets.
EXECUTION_TIMEOUT504YesExecution exceeded the allowed time budget.
CHART_CAPACITY_EXCEEDED429NoA size, quota, rate, or time limit was exceeded.
CHART_BEHAVIOR_CAPACITY_EXCEEDED429NoA size, quota, rate, or time limit was exceeded.
CHART_OUTPUT_TOO_LARGE429NoA size, quota, rate, or time limit was exceeded.
CHART_UNSAFE_OUTPUT500NoThe skill encountered an unexpected execution failure.

Other limits

LimitValue
Recommended inline bytes32 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)

Request bodyjson
{
  "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

Inputjson
{
  "title": "Acquisition funnel",
  "data": {
    "stages": [
      {
        "id": "visits",
        "label": "Visits",
        "value": "10000"
      },
      {
        "id": "trials",
        "label": "Trials",
        "value": "2400"
      },
      {
        "id": "paid",
        "label": "Paid",
        "value": "900"
      }
    ]
  }
}
Expected outputjson
{
  "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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, monospace\" font-weight=\"600\" textLength=\"7\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-contrast-text\">3</text></svg>",
  "height": 480
}

Increase remains an increase

Inputjson
{
  "data": {
    "stages": [
      {
        "id": "screened",
        "label": "Screened",
        "value": "310"
      },
      {
        "id": "interviewed",
        "label": "Interviewed",
        "value": "340"
      }
    ]
  },
  "options": {
    "increasePolicy": "warn"
  }
}
Expected outputjson
{
  "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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, 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=\"&#39;Squillify Mono&#39;, &#39;IBM Plex Mono&#39;, monospace\" font-weight=\"600\" textLength=\"7\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-contrast-text\">2</text></svg>",
  "height": 480
}
Tip
You receive an increase warning; we never rewrite it as negative loss.
  • 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

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.

Tags

chartvisualizationfunnelsvgconversion