Sparkline

chart.sparkline

ProductionBounded custom (Class B)Deterministicstrictfastv1.0.0

No network

Overview

Use inline, card, or small-multiple presentation for one to four bounded series. Emphasis roles are explicit; an exact reference is a separate object. Lines are marker-free with a small bounded halo. No full axes or legend. 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.

Compact components need stricter mark and target budgets than a reduced full chart.

Reliability

Identical input yields byte-identical static SVG; references and gaps are explicit.

Context footprint

You receive CHART_CAPACITY_EXCEEDED when the compact canvas cannot carry the points, CHART_BEHAVIOR_CAPACITY_EXCEEDED when host data exceeds its bound, and CHART_OUTPUT_TOO_LARGE when estimated output exceeds its bound. A successful call costs 3 execution credits.

When to use it

When trend context must fit beside a metric or in a dense card.

When readers need axes, detailed labels, or uncertainty bands.

Scope

Note

Compact exact trend components with no full axes or legend.

Non-goals

Full analytical axes, bands, or dense tick labels
Aggregation or forecasting

Properties

IdempotentRetry safeStreaming supportedFile input supportedRequires external service

Capabilities

generationimage-processing

Cost & billing

Flat rate per invocation

MetercallsBillable onsuccessCost per call3 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

Field	Type	Required	Description
domainType	string	Yes	Required number, time, or label domain kind.
x	array	Yes	Array of 2..1,000 strictly ordered homogeneous number, date, instant, or label strings.
series	array	Yes	Array of 1..4 closed {id,label,values,meaning?} exact-decimal series with explicit null gaps.
presentation	string	No	inline (default), card, or smallMultiples.
scale	string	No	shared (default) or independent; independent applies only to smallMultiples.
emphasis	array	No	Array containing a unique subset of first, last, min, max, and gaps; default is [last].
reference	object	No	Separate closed {value,label?,meaning?} exact reference object; when omitted no reference is drawn.
curve	string	No	straight (default), stepBefore, stepAfter, or monotone.
markers	string	No	never only (default when omitted); sparklines are marker-free and use a bounded soft line halo.
width	integer	No	Canvas width 40..8000 px; default 220.
height	integer	No	Canvas height 40..8000 px; default 56.
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.
title	string	No	Heading drawn above the plot (optional; at most 1024 code points). Omit it and the chart renders untitled — we never invent a title from your data. One code point past that ceiling is refused as TOOL_INPUT_INVALID.
subtitle	string	No	Second line under the title, useful for the period covered or the unit (optional; at most 1024 code points). Omit it and no second line is drawn.
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.
behavior	object	No	Optional closed motion and interaction settings. Default: omission enables the family's certified entry motion, tooltip, focus, and crosshair with reduced motion respected; set both nested enabled flags false for a static-only result. 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.
output	object	No	Closed object with optional idNamespace string; when omitted we derive a deterministic SVG id namespace.

Output schema

Field	Type	Required	Description
svg	string	Yes	Allowlist-checked script-free 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 width in pixels.
height	integer	Yes	Rendered height in pixels.
viewBox	string	Yes	SVG viewBox string (for example "0 0 800 400").
domainResults	array	Yes	Input-order domain positions with canonical normalized values and retained offsets.
seriesResults	array	Yes	Input-order exact raw values, optional indexed values, extrema, gaps, and band presence.
renderSummary	object	Yes	Bounded summary of the resolved domain, curve, series, points, gaps, and bands.
accessibility	object	Yes	Accessible title, resolved detail rung, and deterministic data description.
transformationSummary	object	Yes	Whether baseline indexing was applied and the selected baseline index.
behavior	object	Yes	Resolved default-on motion and interaction report. Includes the digest-bound host artifact when behavior is enabled and always preserves a complete script-free 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.
styleReport	object	No	Present only when a 'style' input was supplied. Reports tokensApplied, rulesApplied, typedRulesApplied, typedAssignmentsApplied, rulesDropped, declarationsDropped and, when anything was dropped, a bounded list of reasons — so a stylesheet that was modified never looks like one that was applied whole.
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/execute

curl

curl -sS -X POST "$BASE/v1/execute" \
  -H "Authorization: Bearer $KEY" -H "Content-Type: application/json" \
  -d '{"skillKey":"chart.sparkline","input":{"domainType":"number","x":["1","2","3"],"series":[{"id":"orders","label":"Orders","values":["8","11","10"]}],"emphasis":["last"]}}'

Integrations

TypeScript SDK

import { Squillify } from "@squillify/sdk";

const sq = new Squillify({ apiKey: process.env.SQUILLIFY_API_KEY });

const { output } = await sq.execute("chart.sparkline", {"x":["1","2","3","4"],"presentation":"inline","series":[{"id":"orders","label":"Orders","values":["8","11","10","14"]}],"domainType":"number","emphasis":["last","min"]});

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.

Other limits

Limit	Value
Recommended inline bytes	32 KiB

Limitations

Full analytical axes, bands, or dense tick labels
Aggregation or forecasting
Detailed axis reading
More than four overlaid series

How to call

POST /v1/execute (requires authentication)

Request bodyjson

{
  "skillKey": "chart.sparkline",
  "input": {
    "x": [
      "1",
      "2",
      "3",
      "4"
    ],
    "presentation": "inline",
    "series": [
      {
        "id": "orders",
        "label": "Orders",
        "values": [
          "8",
          "11",
          "10",
          "14"
        ]
      }
    ],
    "domainType": "number",
    "emphasis": [
      "last",
      "min"
    ]
  }
}

Examples

Inline weekly trend

Inputjson

{
  "x": [
    "1",
    "2",
    "3",
    "4"
  ],
  "presentation": "inline",
  "series": [
    {
      "id": "orders",
      "label": "Orders",
      "values": [
        "8",
        "11",
        "10",
        "14"
      ]
    }
  ],
  "domainType": "number",
  "emphasis": [
    "last",
    "min"
  ]
}

Expected outputjson

{
  "transformationSummary": {
    "presentation": "inline",
    "mode": "raw",
    "scale": "shared",
    "emphasis": [
      "min",
      "last"
    ],
    "applied": false
  },
  "domainResults": [
    {
      "input": "1",
      "normalized": "1"
    },
    {
      "input": "2",
      "normalized": "2"
    },
    {
      "input": "3",
      "normalized": "3"
    },
    {
      "input": "4",
      "normalized": "4"
    }
  ],
  "height": 56,
  "viewBox": "0 0 220 56",
  "renderSummary": {
    "domainType": "number",
    "curve": "straight",
    "seriesCount": 1,
    "pointCount": 4,
    "gapCount": 0,
    "bandsRendered": false
  },
  "width": 220,
  "behavior": {
    "motion": {
      "enabled": true,
      "finalState": "static-equivalent",
      "reducedMotion": "respect",
      "preset": "enter_trace"
    },
    "interaction": {
      "enabled": true,
      "capabilities": [
        "crosshair",
        "focus",
        "tooltip"
      ]
    }
  },
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"220\" height=\"56\" viewBox=\"0 0 220 56\" role=\"img\" class=\"sq-chart sq-chart--sparkline sq-family--cartesian sq-theme--squillify sq-surface--light sq-density--standard\" data-sq-style-contract=\"CHART_STYLE@1\" data-sq-chart=\"sparkline\" data-sq-family=\"cartesian\" 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-e16bffb108c1-title-0 sq-e16bffb108c1-desc-1\"><title id=\"sq-e16bffb108c1-title-0\">sparkline chart with 1 series</title><desc id=\"sq-e16bffb108c1-desc-1\">sparkline chart. 1 series over 4 ordered points. Orders: 1 8, 2 11, 3 10, 4 14. All values are listed.</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-line[data-sq-palette-index=\"0\"]{stroke:var(--sq-series-1);}</style><rect x=\"0\" y=\"0\" width=\"220\" height=\"56\" fill=\"#ffffff\" class=\"sq-background\" data-sq-role=\"background\"/><g class=\"sq-plot\" data-sq-role=\"plot\"><line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"44\" class=\"sq-mark\" data-sq-role=\"plot\" data-sq-target-key=\"t-point-4d7581b3505056b7\"/><line x1=\"77.268\" y1=\"12\" x2=\"77.268\" y2=\"44\" class=\"sq-mark\" data-sq-role=\"plot\" data-sq-target-key=\"t-point-c4291e18b79c7abe\"/><line x1=\"142.732\" y1=\"12\" x2=\"142.732\" y2=\"44\" class=\"sq-mark\" data-sq-role=\"plot\" data-sq-target-key=\"t-point-d6b38cb21a169996\"/><line x1=\"208\" y1=\"12\" x2=\"208\" y2=\"44\" class=\"sq-mark\" data-sq-role=\"plot\" data-sq-target-key=\"t-point-9c49ad551fe92485\"/><path d=\"M 12 44 L 77.268 28 L 142.732 33.333 L 208 12\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"5\" stroke-opacity=\"0.18\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"sq-line-glow\" data-sq-role=\"line\" data-sq-series-index=\"0\" data-sq-palette-index=\"0\"/><path d=\"M 12 44 L 77.268 28 L 142.732 33.333 L 208 12\" fill=\"none\" stroke=\"#2563eb\" stroke-width=\"2\" class=\"sq-mark sq-line\" data-sq-role=\"line\" data-sq-target-key=\"t-series-992f9ba845aa9d8e\" data-sq-series-index=\"0\" data-sq-palette-index=\"0\"/></g></svg>",
  "seriesResults": [
    {
      "maximum": {
        "value": "14",
        "index": 3
      },
      "hasBand": false,
      "label": "Orders",
      "rawValues": [
        "8",
        "11",
        "10",
        "14"
      ],
      "id": "orders",
      "meaning": "neutral",
      "gapRuns": [],
      "minimum": {
        "value": "8",
        "index": 0
      }
    }
  ],
  "accessibility": {
    "title": "sparkline chart with 1 series",
    "detail": "full",
    "description": "sparkline chart. 1 series over 4 ordered points. Orders: 1 8, 2 11, 3 10, 4 14. All values are listed."
  }
}

Card trend with target reference