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.

Informations de source

Dépôt
adobe/react-spectrum-charts
Dernière activité de la source
15 octobre 2026 à 22:47
Langue détectée de SKILL.md
anglais
Étoiles
129
Forks
30

Options d'installation

Le prompt qui vérifie d'abord la source est sélectionné par défaut. Vous pouvez passer à une commande directe ou télécharger une copie locale.

Vérifiez les fichiers source

Lisez SKILL.md et les fichiers associés affichés par SkillsMP avant de décider de l'installer.

Affichage de SKILL.md

SKILL.md
Instructions source · Aperçu en lecture seule
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
Voir sur GitHub
Ce SKILL.md est tres volumineux, SkillsMP affiche donc ici seulement la premiere section. Voir sur GitHub