Skip to main content

chart-features

Engine-agnostic catalog of every chart feature React Spectrum Charts implements (marks, decorations, chart-level features). Use when generating a chart spec for RSC, Vega, Chart.js, or D3 to confirm a requested feature exists and what it's configured with, before inventing behavior.

Quellinformationen

Repository
adobe/react-spectrum-charts
Letzte Quellaktivität
15. Oktober 2026 um 22:47
Erkannte Sprache von SKILL.md
Englisch
Sterne
131
Forks
30

Installationsoptionen

Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.

Quelldateien prüfen

Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.

SKILL.md wird angezeigt

SKILL.md
Quellanweisungen · Schreibgeschützte Vorschau
name
chart-features
description
Engine-agnostic catalog of every chart feature React Spectrum Charts implements (marks, decorations, chart-level features). Use when generating a chart spec for RSC, Vega, Chart.js, or D3 to confirm a requested feature exists and what it's configured with, before inventing behavior.
# RSC Chart Feature Catalog *Auto-generated by `scripts/createChartFeatureSkill.js` from `packages/mcp/src/featureCatalog.ts` — do not hand-edit. Regenerate with `yarn skills:update-chart-features` after changing the source catalog.* *Generated on: 2026-08-04T19:35:25.629Z* This is the same data served by the `list_chart_features`/`read_chart_feature` tools in `@spectrum-charts/mcp`. Parameter shapes are intentionally not transcribed here — each feature points at its canonical `*Options` TypeScript type instead, so this catalog can't drift from the real source. "RSC support" reflects whether a JSX wrapper component exists today, including alpha/rc import paths (`@adobe/react-spectrum-charts/alpha` or `/rc`) — those are considered supported, just not yet in the stable barrel; a feature with no RSC component at all is still a real, spec-buildable feature for the Vega/Chart.js/D3 fallback path. ## Marks (top-level chart types) ### Area (`area`) Fills the region between a metric line and a baseline (or between two metric fields) to show volume/magnitude over a continuous dimension (usually time). - **Applies to**: `chart` - **Related tokens**: `DEFAULT_COLOR`, `DEFAULT_COLOR_SCHEME`, `DEFAULT_TIME_DIMENSION`, `DEFAULT_METRIC` - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `AreaOptions` in `packages/vega-spec-builder-s2/src/types/marks/areaSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/area/areaSpecBuilder.ts` ### Bar (`bar`) Draws categorical bars for a metric, with support for grouping, stacking, dual-axis, trellising, square/round corners, and a large family of attachable decorations. - **Applies to**: `chart` - **Related tokens**: `DEFAULT_COLOR_SCHEME`, `DEFAULT_CATEGORICAL_DIMENSION`, `DEFAULT_LINE_TYPES`, `DEFAULT_LINE_WIDTHS`, `CHART_SIZE_STROKE_WIDTH`, `CHART_SIZE_LABEL_GAP` - **RSC support**: S1 ✅, S2 ✅ - **Canonical parameter shape**: `BarOptions` in `packages/vega-spec-builder-s2/src/types/marks/barSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/bar/barSpecBuilder.ts` ### Bullet (`bullet`) Renders a compact horizontal/vertical 'target vs. actual' gauge bar (KPI-style), with optional qualitative threshold bands and a target marker. - **Applies to**: `chart` - **Related tokens**: `DEFAULT_BULLET_DIRECTION`, `DEFAULT_COLOR_SCHEME` - **RSC support**: S1 ✅, S2 ❌ - **Maturity**: S1 via `alpha` import path — not yet in the stable barrel, but alpha/rc components are considered supported - **Canonical parameter shape**: `BulletOptions` in `packages/vega-spec-builder-s2/src/types/marks/bulletSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/bullet/bulletSpecBuilder.ts` ### Combo (`combo`) Composites a Bar mark and a Line mark on the same chart/axes (e.g. bars for volume + line for a rate), so the two mark families can share a dimension/scale. - **Applies to**: `chart` - **Related tokens**: _none_ - **RSC support**: S1 ✅, S2 ❌ - **Maturity**: S1 via `alpha` import path — not yet in the stable barrel, but alpha/rc components are considered supported - **Canonical parameter shape**: `ComboOptions` in `packages/vega-spec-builder-s2/src/types/marks/comboSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/combo/comboSpecBuilder.ts` ### Donut (`donut`) Renders proportional data as a ring (or pie when holeRatio=0), with an optional center summary metric and per-segment labels. - **Applies to**: `chart` - **Related tokens**: `DEFAULT_COLOR_SCHEME` - **RSC support**: S1 ✅, S2 ✅ - **Maturity**: S1 via `rc` import path, S2 via `rc` import path — not yet in the stable barrel, but alpha/rc components are considered supported - **Canonical parameter shape**: `DonutOptions` in `packages/vega-spec-builder-s2/src/types/marks/donutSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/donut/donutSpecBuilder.ts` ### Line (`line`) Draws a trended line for a metric across a dimension (typically time), with rich interaction (hover animation, sparkline mode, dual-axis, gradient) and the largest set of attachable decorations of any mark. - **Applies to**: `chart` - **Related tokens**: `DEFAULT_COLOR_SCHEME`, `DEFAULT_INTERACTION_MODE`, `DEFAULT_LINE_TYPES`, `CHART_SIZE_POINT_SIZE`, `CHART_SIZE_STROKE_WIDTH`, `CHART_SIZE_HOVER_STROKE_WIDTH` - **RSC support**: S1 ✅, S2 ✅ - **Canonical parameter shape**: `LineOptions` in `packages/vega-spec-builder-s2/src/types/marks/lineSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/line/lineSpecBuilder.ts` ### Scatter (`scatter`) Plots individual data points (x/y) as symbols, with facetable color/size/line-type/opacity/stroke and optional blend-mode for overlap density. - **Applies to**: `chart` - **Related tokens**: `DEFAULT_SYMBOL_SIZE`, `DEFAULT_SYMBOL_SHAPES`, `DEFAULT_SYMBOL_STROKE_WIDTH`, `CHART_SIZE_POINT_SIZE` - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `ScatterOptions` in `packages/vega-spec-builder-s2/src/types/marks/scatterSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/scatter/scatterSpecBuilder.ts` ### Venn (`venn`) Draws a proportional Venn/Euler diagram of set sizes and intersections, with labels inside sets/intersections. - **Applies to**: `chart` - **Related tokens**: `DEFAULT_COLOR_SCHEME` - **RSC support**: S1 ✅, S2 ❌ - **Maturity**: S1 via `alpha` import path — not yet in the stable barrel, but alpha/rc components are considered supported - **Canonical parameter shape**: `VennOptions` in `packages/vega-spec-builder-s2/src/types/marks/vennSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/venn/vennSpecBuilder.ts` ## Mark decorations / sub-features ### Bar Direct Label (`bar-direct-label`) Draws the metric value as a text label directly on/adjacent to each bar, instead of relying on axis/tooltip. - **Applies to**: `bar` - **Related tokens**: `ANNOTATION_FONT_SIZE`, `ANNOTATION_FONT_WEIGHT` - **RSC support**: S1 ❌, S2 ✅ - **Canonical parameter shape**: `BarDirectLabelOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/barDirectLabelSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/barDirectLabel/barDirectLabelUtils.ts` ### Line Direct Label (`line-direct-label`) Places a text label at the end (or a specified point) of a line series to identify it without needing the legend. - **Applies to**: `line` - **Related tokens**: `DEFAULT_FONT_SIZE` - **RSC support**: S1 ❌, S2 ✅ - **Canonical parameter shape**: `LineDirectLabelOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/lineDirectLabelSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/lineDirectLabel/lineDirectLabelUtils.ts` ### Line Forecast (`line-forecast`) Extends a line series past its known data with a projected/forecast segment, typically styled distinctly (e.g. dashed) with a boundary marker between actual and forecast. - **Applies to**: `line` - **Related tokens**: `DEFAULT_LINE_TYPES` - **RSC support**: S1 ❌, S2 ✅ - **Canonical parameter shape**: `LineForecastOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/lineForecastSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/lineForecast/lineForecastUtils.ts` ### Metric Range (`metric-range`) Draws a shaded band (min/max envelope, e.g. a confidence interval) around a line series. - **Applies to**: `line` - **Related tokens**: _none_ - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `MetricRangeOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/metricRangeSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/metricRange/metricRangeUtils.ts` ### Trendline (`trendline`) Draws a fitted statistical trend line (linear/polynomial/exponential/log/power regression, or moving-window average/median) over a series' data points, to surface an underlying pattern independent of noise. - **Applies to**: `bar`, `line`, `scatter` - **Related tokens**: `DEFAULT_COLOR_SCHEME`, `TRENDLINE_VALUE` - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `TrendlineOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/trendlineSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/trendline/trendlineSpecBuilder.ts` ### Trendline Annotation (`trendline-annotation`) Shows a small badge/label reporting the trendline's value (e.g. slope/formula result) at a specific dimension point. - **Applies to**: `trendline` - **Related tokens**: `ANNOTATION_FONT_SIZE`, `ANNOTATION_FONT_WEIGHT`, `ANNOTATION_PADDING` - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `TrendlineAnnotationOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/trendlineAnnotationSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/trendlineAnnotation/trendlineAnnotationUtils.ts` ### Scatter Path (`scatter-path`) Connects points within a group (e.g. by series/time order) with a line, turning a scatter plot into a path/trajectory visualization. - **Applies to**: `scatter` - **Related tokens**: `DEFAULT_LINE_WIDTHS` - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `ScatterPathOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/scatterPathSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/scatterPath/scatterPathUtils.ts` ### Axis Annotation (`axis-annotation`) Places grouped markers/callouts along an axis at specific data-driven points (distinct from reference lines), each with its own color and optional popover/inspect. - **Applies to**: `axis` - **Related tokens**: `DEFAULT_AXIS_ANNOTATION_COLOR`, `DEFAULT_AXIS_ANNOTATION_OFFSET`, `ANNOTATION_FONT_SIZE`, `ANNOTATION_FONT_WEIGHT`, `ANNOTATION_PADDING` - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `AxisAnnotationOptions` in `packages/vega-spec-builder-s2/src/types/axis/axisAnnotationSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/axisAnnotation/axisAnnotationUtils.ts` ### Reference Line (`reference-line`) Draws a single fixed rule (with optional caret/cap and text label) at a specific value on an axis — e.g. a goal line or threshold marker, independent of the data. - **Applies to**: `axis` - **Related tokens**: `CHART_SIZE_STROKE_WIDTH`, `REFERENCE_LINE_SIZE_STROKE_WIDTHS` - **RSC support**: S1 ✅, S2 ✅ - **Canonical parameter shape**: `ReferenceLineOptions` in `packages/vega-spec-builder-s2/src/types/axis/referenceLineSpec.types.ts` - **Builder implementation**: `packages/vega-spec-builder-s2/src/axis/axisReferenceLineUtils.ts` ### Bar Annotation (`bar-annotation`) Draws a text callout on a bar. - **Applies to**: `bar` - **Related tokens**: _none_ - **RSC support**: S1 ❌, S2 ❌ - **Canonical parameter shape**: `BarAnnotationOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/barAnnotationSpec.types.ts` ### Line Point Annotation (`line-point-annotation`) Anchors a text annotation to a specific data point on a line, auto-placing it to avoid overlap. - **Applies to**: `line` - **Related tokens**: _none_ - **RSC support**: S1 ✅, S2 ✅ - **Canonical parameter shape**: `LinePointAnnotationOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/linePointAnnotationSpec.types.ts` ### Scatter Annotation (`scatter-annotation`) Same point-anchored annotation behavior as Line Point Annotation, for scatter points. - **Applies to**: `scatter` - **Related tokens**: _none_ - **RSC support**: S1 ✅, S2 ❌ - **Canonical parameter shape**: `ScatterAnnotationOptions` in `packages/vega-spec-builder-s2/src/types/marks/supplemental/scatterAnnotationSpec.types.ts` ### Donut Summary (`donut-summary`) Shows a formatted metric total/summary in the donut's center hole. - **Applies to**: `donut` - **Related tokens**: _none_ - **RSC support**: S1 ✅, S2 ✅ - **Maturity**: S1 via `rc` import path, S2 via `rc` import path — not yet in the stable barrel, but alpha/rc components are considered supported
Auf GitHub ansehen
Diese SKILL.md ist sehr gross, daher zeigt SkillsMP hier nur den ersten Abschnitt. Auf GitHub ansehen