Skip to main content

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

MicroSkills Reference

Timeline

chart.timeline

ProductionBounded custom (Class B)Deterministicstrictfastv1.0.0
No network

Overview

Use proportional elapsed-time spacing. Timeline has no task, progress, dependency, resource, scheduling, or rollup semantics. 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.

Events and historical periods need exact time normalization and collision-bounded lanes without acquiring task or dependency semantics.

Reliability

Dates/instants stay homogeneous, offsets are retained, marks remain proportional within the exact domain, and the visible time grid groups into equal-width columns until labels remain readable.

Context footprint

You receive CHART_CAPACITY_EXCEEDED when the temporal lanes cannot remain legible, 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 you need a bounded event history or period timeline.

When records are project tasks or carry dependencies; use chart.gantt.

Scope

Note
Exact point events, milestones, and periods on deterministic temporal lanes.

Non-goals

  • Tasks, progress, dependencies, resources, or scheduling
  • Automatic date inference, clustering, or compressed time

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

FieldTypeRequiredDescription
timeTypestringYesRequired date or explicit-offset instant precision.
eventsarrayYesArray of 1..500 closed event objects with id, kind, label, and kind-specific at or start/end fields.
groupsarrayNoArray of ordered closed {id,label} lane-header objects; when omitted no group headers are rendered.
spacingstringNoproportional only (default when omitted); elapsed temporal distance is preserved.
orientationstringNohorizontal (default) or vertical.
layoutModestringNosingle, alternating (default), or groupedLanes.
eventOrderstringNochronological only (default when omitted); input order is retained in eventResults.
widthintegerNoCanvas width in pixels, 100..1600 (optional; default 900). 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.
titlestringNoHeading 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.
subtitlestringNoSecond 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.
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.
behaviorobjectNoOptional 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.
outputobjectNoClosed object with optional idNamespace string; when omitted we derive a deterministic SVG id namespace.

Output schema

FieldTypeRequiredDescription
svgstringYesAllowlist-checked 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 width in pixels.
heightintegerYesRendered height in pixels.
viewBoxstringYesRendered SVG viewBox.
eventResultsarrayYesInput-order array of closed exact event or period result objects with retained temporal offsets.
groupResultsarrayYesArray of declared lane-header result objects containing group identifiers, labels, and event counts.
renderSummaryobjectYesClosed object summarizing bounded spacing, orientation, event count, group count, and lane count.
accessibilityobjectYesClosed object containing the accessible title, selected detail rung, and complete description.
transformationSummaryobjectYesClosed object recording that values were not transformed and disclosing the selected spacing.
behaviorobjectYesResolved 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.
styleReportobjectNoOptional closed report of caller-style paths that were applied, ignored, or rejected.
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.timeline","input":{"timeType":"date","events":[{"id":"alpha","kind":"milestone","label":"Alpha","at":"2026-02-15"},{"id":"beta","kind":"period","label":"Private beta","start":"2026-03-01","end":"2026-04-15"}]}}'
Integrations
TypeScript SDK
import { Squillify } from "@squillify/sdk";

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

const { output } = await sq.execute("chart.timeline", {"events":[{"id":"alpha","kind":"milestone","label":"Alpha","at":"2026-02-15"},{"label":"Private beta","id":"beta","start":"2026-03-01","end":"2026-04-15","kind":"period"}],"timeType":"date","spacing":"proportional"});

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.

Other limits

LimitValue
Recommended inline bytes32 KiB

Limitations

  • Tasks, progress, dependencies, resources, or scheduling
  • Automatic date inference, clustering, or compressed time
  • Project schedules
  • Automatic timeline clustering

How to call

POST /v1/execute (requires authentication)

Request bodyjson
{
  "skillKey": "chart.timeline",
  "input": {
    "events": [
      {
        "id": "alpha",
        "kind": "milestone",
        "label": "Alpha",
        "at": "2026-02-15"
      },
      {
        "label": "Private beta",
        "id": "beta",
        "start": "2026-03-01",
        "end": "2026-04-15",
        "kind": "period"
      }
    ],
    "timeType": "date",
    "spacing": "proportional"
  }
}

Examples

Product history

Inputjson
{
  "events": [
    {
      "id": "alpha",
      "kind": "milestone",
      "label": "Alpha",
      "at": "2026-02-15"
    },
    {
      "label": "Private beta",
      "id": "beta",
      "start": "2026-03-01",
      "end": "2026-04-15",
      "kind": "period"
    }
  ],
  "timeType": "date",
  "spacing": "proportional"
}
Expected outputjson
{
  "height": 480,
  "viewBox": "0 0 900 480",
  "renderSummary": {
    "spacing": "proportional",
    "orientation": "horizontal",
    "itemCount": 2,
    "laneCount": 2,
    "linkCount": 0
  },
  "width": 900,
  "behavior": {
    "motion": {
      "finalState": "static-equivalent",
      "reducedMotion": "respect",
      "preset": "enter_marks",
      "enabled": true
    },
    "interaction": {
      "enabled": true,
      "capabilities": [
        "crosshair",
        "focus",
        "tooltip"
      ]
    }
  },
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"900\" height=\"480\" viewBox=\"0 0 900 480\" role=\"img\" class=\"sq-chart sq-chart--timeline sq-family--lane sq-theme--squillify sq-surface--light sq-density--standard\" data-sq-style-contract=\"CHART_STYLE@1\" data-sq-chart=\"timeline\" data-sq-family=\"lane\" 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-832dff7fbe84-title-0 sq-832dff7fbe84-desc-1\"><title id=\"sq-832dff7fbe84-title-0\">timeline with 2 items</title><desc id=\"sq-832dff7fbe84-desc-1\">timeline temporal lane chart. 2 items in 2 lanes using proportional spacing. Items: Alpha 0, Private beta 0.237. 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-grid{stroke:var(--sq-chart-grid);}.sq-chart .sq-tick-label{fill:var(--sq-chart-text-muted);}.sq-chart .sq-contrast-text{fill:#ffffff;mix-blend-mode:difference;}.sq-chart .sq-point[data-sq-palette-index=\"0\"]{fill:var(--sq-series-1);}.sq-chart .sq-band[data-sq-palette-index=\"1\"]{fill:var(--sq-series-2);}</style><rect x=\"0\" y=\"0\" width=\"900\" height=\"480\" fill=\"#ffffff\" class=\"sq-background\" data-sq-role=\"background\"/><g class=\"sq-plot\" data-sq-role=\"plot\"><rect x=\"12\" y=\"16\" width=\"876\" height=\"18\" fill=\"#dbe7f5\" class=\"sq-time-axis-band sq-time-axis-year-band\" data-sq-role=\"band\" data-sq-point-index=\"0\"/><text x=\"450\" y=\"28.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"24\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"0\" data-sq-row-index=\"2\">2026</text><rect x=\"12\" y=\"34\" width=\"207.864\" height=\"18\" fill=\"#edf3fa\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"1\"/><text x=\"115.932\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"1\" data-sq-row-index=\"1\">Feb</text><rect x=\"219.864\" y=\"34\" width=\"460.271\" height=\"18\" fill=\"#e2ebf5\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"2\"/><text x=\"450\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"2\" data-sq-row-index=\"1\">Mar</text><rect x=\"680.136\" y=\"34\" width=\"207.864\" height=\"18\" fill=\"#edf3fa\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"3\"/><text x=\"784.068\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"3\" data-sq-row-index=\"1\">Apr</text><line x1=\"12\" y1=\"70\" x2=\"12\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"0\"/><text x=\"12\" y=\"64\" font-size=\"10\" text-anchor=\"start\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"0\" data-sq-row-index=\"0\">15</text><line x1=\"85\" y1=\"70\" x2=\"85\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"1\"/><text x=\"85\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"1\" data-sq-row-index=\"0\">20</text><line x1=\"158\" y1=\"70\" x2=\"158\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"2\"/><text x=\"158\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"2\" data-sq-row-index=\"0\">25</text><line x1=\"231\" y1=\"70\" x2=\"231\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"3\"/><text x=\"231\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"3\" data-sq-row-index=\"0\">02</text><line x1=\"304\" y1=\"70\" x2=\"304\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"4\"/><text x=\"304\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"4\" data-sq-row-index=\"0\">07</text><line x1=\"377\" y1=\"70\" x2=\"377\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"5\"/><text x=\"377\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"5\" data-sq-row-index=\"0\">12</text><line x1=\"450\" y1=\"70\" x2=\"450\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"6\"/><text x=\"450\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"6\" data-sq-row-index=\"0\">17</text><line x1=\"523\" y1=\"70\" x2=\"523\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"7\"/><text x=\"523\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"7\" data-sq-row-index=\"0\">21</text><line x1=\"596\" y1=\"70\" x2=\"596\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"8\"/><text x=\"596\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"8\" data-sq-row-index=\"0\">26</text><line x1=\"669\" y1=\"70\" x2=\"669\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"9\"/><text x=\"669\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"9\" data-sq-row-index=\"0\">31</text><line x1=\"742\" y1=\"70\" x2=\"742\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"10\"/><text x=\"742\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"10\" data-sq-row-index=\"0\">05</text><line x1=\"815\" y1=\"70\" x2=\"815\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"11\"/><text x=\"815\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"11\" data-sq-row-index=\"0\">10</text><line x1=\"888\" y1=\"70\" x2=\"888\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"12\"/><text x=\"888\" y=\"64\" font-size=\"10\" text-anchor=\"end\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"12\" data-sq-row-index=\"0\">15</text><line x1=\"12\" y1=\"169.5\" x2=\"888\" y2=\"169.5\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-lane-rule\" data-sq-role=\"grid-line\" data-sq-row-index=\"0\"/><line x1=\"12\" y1=\"368.5\" x2=\"888\" y2=\"368.5\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-lane-rule\" data-sq-role=\"grid-line\" data-sq-row-index=\"1\"/><rect x=\"5\" y=\"162.5\" width=\"14\" height=\"14\" fill=\"#2563eb\" class=\"sq-point\" data-sq-role=\"point\" data-sq-target-key=\"t-item-d99df5d8b1a4844b\" data-sq-point-index=\"0\" data-sq-palette-index=\"0\"/><text x=\"12\" y=\"192.5\" font-size=\"10\" text-anchor=\"start\" textLength=\"30\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-label sq-timeline-milestone-label\" data-sq-role=\"category-label\" data-sq-point-index=\"0\">Alpha</text><rect x=\"219.864\" y=\"332.68\" width=\"668.136\" height=\"71.64\" rx=\"3\" fill=\"#6d5ce7\" class=\"sq-band\" data-sq-role=\"band\" data-sq-target-key=\"t-item-c1b969e967e34723\" data-sq-point-index=\"1\" data-sq-palette-index=\"1\"/><g transform=\"translate(225.864 368.5)\"><text x=\"0\" y=\"3.5\" font-size=\"10\" text-anchor=\"start\" textLength=\"72\" lengthAdjust=\"spacing\" fill=\"#ffffff\" class=\"sq-label sq-timeline-period-label sq-contrast-text\" data-sq-role=\"category-label\" data-sq-point-index=\"1\">Private beta</text></g></g></svg>",
  "groupResults": [],
  "accessibility": {
    "title": "timeline with 2 items",
    "detail": "full",
    "description": "timeline temporal lane chart. 2 items in 2 lanes using proportional spacing. Items: Alpha 0, Private beta 0.237. All values are listed."
  },
  "transformationSummary": {
    "applied": false,
    "spacing": "proportional"
  },
  "eventResults": [
    {
      "inputIndex": 0,
      "resolvedOrder": 0,
      "kind": "milestone",
      "label": "Alpha",
      "startNormalized": "2026-02-15",
      "id": "alpha",
      "lane": 0,
      "meaning": "neutral",
      "startOffset": "Z",
      "startOriginal": "2026-02-15"
    },
    {
      "meaning": "neutral",
      "inputIndex": 1,
      "durationUnit": "days",
      "startOriginal": "2026-03-01",
      "endNormalized": "2026-04-15",
      "resolvedOrder": 1,
      "startNormalized": "2026-03-01",
      "startOffset": "Z",
      "id": "beta",
      "lane": 1,
      "endOriginal": "2026-04-15",
      "duration": "45",
      "kind": "period",
      "label": "Private beta",
      "endOffset": "Z"
    }
  ]
}

Long-range proportional history

Inputjson
{
  "events": [
    {
      "id": "decision",
      "kind": "event",
      "label": "Decision",
      "at": "2026-01-10"
    },
    {
      "id": "launch",
      "kind": "milestone",
      "label": "Launch",
      "at": "2026-06-01"
    }
  ],
  "timeType": "date",
  "spacing": "proportional"
}
Expected outputjson
{
  "height": 480,
  "viewBox": "0 0 900 480",
  "renderSummary": {
    "spacing": "proportional",
    "orientation": "horizontal",
    "itemCount": 2,
    "laneCount": 2,
    "linkCount": 0
  },
  "width": 900,
  "behavior": {
    "motion": {
      "finalState": "static-equivalent",
      "reducedMotion": "respect",
      "preset": "enter_marks",
      "enabled": true
    },
    "interaction": {
      "enabled": true,
      "capabilities": [
        "crosshair",
        "focus",
        "tooltip"
      ]
    }
  },
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"900\" height=\"480\" viewBox=\"0 0 900 480\" role=\"img\" class=\"sq-chart sq-chart--timeline sq-family--lane sq-theme--squillify sq-surface--light sq-density--standard\" data-sq-style-contract=\"CHART_STYLE@1\" data-sq-chart=\"timeline\" data-sq-family=\"lane\" 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-9053cf87115d-title-0 sq-9053cf87115d-desc-1\"><title id=\"sq-9053cf87115d-title-0\">timeline with 2 items</title><desc id=\"sq-9053cf87115d-desc-1\">timeline temporal lane chart. 2 items in 2 lanes using proportional spacing. Items: Decision 0, Launch 1. 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-grid{stroke:var(--sq-chart-grid);}.sq-chart .sq-tick-label{fill:var(--sq-chart-text-muted);}.sq-chart .sq-point[data-sq-palette-index=\"0\"]{fill:var(--sq-series-1);}.sq-chart .sq-point[data-sq-palette-index=\"1\"]{fill:var(--sq-series-2);}</style><rect x=\"0\" y=\"0\" width=\"900\" height=\"480\" fill=\"#ffffff\" class=\"sq-background\" data-sq-role=\"background\"/><g class=\"sq-plot\" data-sq-role=\"plot\"><rect x=\"12\" y=\"16\" width=\"876\" height=\"18\" fill=\"#dbe7f5\" class=\"sq-time-axis-band sq-time-axis-year-band\" data-sq-role=\"band\" data-sq-point-index=\"0\"/><text x=\"450\" y=\"28.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"24\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"0\" data-sq-row-index=\"2\">2026</text><rect x=\"12\" y=\"34\" width=\"135.718\" height=\"18\" fill=\"#edf3fa\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"1\"/><text x=\"79.859\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"1\" data-sq-row-index=\"1\">Jan</text><rect x=\"147.718\" y=\"34\" width=\"172.732\" height=\"18\" fill=\"#e2ebf5\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"2\"/><text x=\"234.085\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"2\" data-sq-row-index=\"1\">Feb</text><rect x=\"320.451\" y=\"34\" width=\"191.239\" height=\"18\" fill=\"#edf3fa\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"3\"/><text x=\"416.07\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"3\" data-sq-row-index=\"1\">Mar</text><rect x=\"511.69\" y=\"34\" width=\"185.07\" height=\"18\" fill=\"#e2ebf5\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"4\"/><text x=\"604.225\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"4\" data-sq-row-index=\"1\">Apr</text><rect x=\"696.761\" y=\"34\" width=\"191.239\" height=\"18\" fill=\"#edf3fa\" class=\"sq-time-axis-band sq-time-axis-month-band\" data-sq-role=\"band\" data-sq-point-index=\"5\"/><text x=\"792.38\" y=\"46.5\" font-size=\"10\" text-anchor=\"middle\" textLength=\"18\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-time-axis-band-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"5\" data-sq-row-index=\"1\">May</text><line x1=\"12\" y1=\"70\" x2=\"12\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"0\"/><text x=\"12\" y=\"64\" font-size=\"10\" text-anchor=\"start\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"0\" data-sq-row-index=\"0\">10</text><line x1=\"85\" y1=\"70\" x2=\"85\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"1\"/><text x=\"85\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"1\" data-sq-row-index=\"0\">22</text><line x1=\"158\" y1=\"70\" x2=\"158\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"2\"/><text x=\"158\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"2\" data-sq-row-index=\"0\">03</text><line x1=\"231\" y1=\"70\" x2=\"231\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"3\"/><text x=\"231\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"3\" data-sq-row-index=\"0\">15</text><line x1=\"304\" y1=\"70\" x2=\"304\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"4\"/><text x=\"304\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"4\" data-sq-row-index=\"0\">26</text><line x1=\"377\" y1=\"70\" x2=\"377\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"5\"/><text x=\"377\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"5\" data-sq-row-index=\"0\">10</text><line x1=\"450\" y1=\"70\" x2=\"450\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"6\"/><text x=\"450\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"6\" data-sq-row-index=\"0\">22</text><line x1=\"523\" y1=\"70\" x2=\"523\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"7\"/><text x=\"523\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"7\" data-sq-row-index=\"0\">03</text><line x1=\"596\" y1=\"70\" x2=\"596\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"8\"/><text x=\"596\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"8\" data-sq-row-index=\"0\">15</text><line x1=\"669\" y1=\"70\" x2=\"669\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"9\"/><text x=\"669\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"9\" data-sq-row-index=\"0\">27</text><line x1=\"742\" y1=\"70\" x2=\"742\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"10\"/><text x=\"742\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"10\" data-sq-row-index=\"0\">08</text><line x1=\"815\" y1=\"70\" x2=\"815\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"11\"/><text x=\"815\" y=\"64\" font-size=\"10\" text-anchor=\"middle\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"11\" data-sq-row-index=\"0\">20</text><line x1=\"888\" y1=\"70\" x2=\"888\" y2=\"468\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-grid\" data-sq-role=\"grid-line\" data-sq-point-index=\"12\"/><text x=\"888\" y=\"64\" font-size=\"10\" text-anchor=\"end\" textLength=\"12\" lengthAdjust=\"spacing\" fill=\"#667085\" class=\"sq-label sq-tick-label sq-time-axis-label\" data-sq-role=\"tick-label\" data-sq-point-index=\"12\" data-sq-row-index=\"0\">01</text><line x1=\"12\" y1=\"169.5\" x2=\"888\" y2=\"169.5\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-lane-rule\" data-sq-role=\"grid-line\" data-sq-row-index=\"0\"/><line x1=\"12\" y1=\"368.5\" x2=\"888\" y2=\"368.5\" stroke=\"#d8dee9\" stroke-width=\"1\" class=\"sq-lane-rule\" data-sq-role=\"grid-line\" data-sq-row-index=\"1\"/><rect x=\"5\" y=\"162.5\" width=\"14\" height=\"14\" rx=\"7\" fill=\"#2563eb\" class=\"sq-point\" data-sq-role=\"point\" data-sq-target-key=\"t-item-b213229aa154f9fc\" data-sq-point-index=\"0\" data-sq-palette-index=\"0\"/><text x=\"12\" y=\"192.5\" font-size=\"10\" text-anchor=\"start\" textLength=\"48\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-label sq-timeline-milestone-label\" data-sq-role=\"category-label\" data-sq-point-index=\"0\">Decision</text><rect x=\"881\" y=\"361.5\" width=\"14\" height=\"14\" fill=\"#6d5ce7\" class=\"sq-point\" data-sq-role=\"point\" data-sq-target-key=\"t-item-f5bc2f91954299c8\" data-sq-point-index=\"1\" data-sq-palette-index=\"1\"/><text x=\"888\" y=\"391.5\" font-size=\"10\" text-anchor=\"end\" textLength=\"36\" lengthAdjust=\"spacing\" fill=\"#101828\" class=\"sq-label sq-timeline-milestone-label\" data-sq-role=\"category-label\" data-sq-point-index=\"1\">Launch</text></g></svg>",
  "groupResults": [],
  "accessibility": {
    "title": "timeline with 2 items",
    "detail": "full",
    "description": "timeline temporal lane chart. 2 items in 2 lanes using proportional spacing. Items: Decision 0, Launch 1. All values are listed."
  },
  "transformationSummary": {
    "applied": false,
    "spacing": "proportional"
  },
  "eventResults": [
    {
      "inputIndex": 0,
      "resolvedOrder": 0,
      "kind": "event",
      "label": "Decision",
      "startNormalized": "2026-01-10",
      "id": "decision",
      "lane": 0,
      "meaning": "neutral",
      "startOffset": "Z",
      "startOriginal": "2026-01-10"
    },
    {
      "inputIndex": 1,
      "resolvedOrder": 1,
      "kind": "milestone",
      "label": "Launch",
      "startNormalized": "2026-06-01",
      "id": "launch",
      "lane": 1,
      "meaning": "neutral",
      "startOffset": "Z",
      "startOriginal": "2026-06-01"
    }
  ]
}
  • Show a product or incident history
  • Present bounded periods and milestones with explicit groups

Avoid for

  • Project schedules
  • Automatic timeline clustering

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

eventssvgtimelinechartvisualization