chart-features
Skill131 starsChanged 8 days agoApache-2.0View on GitHub
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.
In this repository12 other files it gives its agents.
- AGENTS.mdAGENTS.md
- adding-chart-marksSkill
- adding-child-componentsSkill
- adding-propsSkill
- comparing-time-periodsSkill
- filing-issuesSkill
- fixing-bugsSkill
- implementing-milestonesSkill
- s2-design-tokensSkill
- summarizing-bugsSkill
- writing-rfcsSkill
- writing-s2-docs-pagesSkill
The file
Files
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:
AreaOptionsinpackages/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:
BarOptionsinpackages/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
alphaimport path — not yet in the stable barrel, but alpha/rc components are considered supported - Canonical parameter shape:
BulletOptionsinpackages/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
alphaimport path — not yet in the stable barrel, but alpha/rc components are considered supported - Canonical parameter shape:
ComboOptionsinpackages/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
rcimport path, S2 viarcimport path — not yet in the stable barrel, but alpha/rc components are considered supported - Canonical parameter shape:
DonutOptionsinpackages/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:
LineOptionsinpackages/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:
ScatterOptionsinpackages/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
alphaimport path — not yet in the stable barrel, but alpha/rc components are considered supported - Canonical parameter shape:
VennOptionsinpackages/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:
BarDirectLabelOptionsinpackages/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:
LineDirectLabelOptionsinpackages/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:
LineForecastOptionsinpackages/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:
MetricRangeOptionsinpackages/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:
TrendlineOptionsinpackages/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:
TrendlineAnnotationOptionsinpackages/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:
ScatterPathOptionsinpackages/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:
AxisAnnotationOptionsinpackages/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:
ReferenceLineOptionsinpackages/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:
BarAnnotationOptionsinpackages/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:
LinePointAnnotationOptionsinpackages/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:
ScatterAnnotationOptionsinpackages/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
rcimport path, S2 viarcimport path — not yet in the stable barrel, but alpha/rc components are considered supported - Canonical parameter shape:
DonutSummaryOptionsinpackages/vega-spec-builder-s2/src/types/marks/supplemental/donutSummarySpec.types.ts
Segment Label (segment-label)
Labels each donut segment with its value and/or percent-of-whole.
- Applies to:
donut - Related tokens: none
- RSC support: S1 ✅, S2 ✅
- Maturity: S1 via
rcimport path, S2 viarcimport path — not yet in the stable barrel, but alpha/rc components are considered supported - Canonical parameter shape:
SegmentLabelOptionsinpackages/vega-spec-builder-s2/src/types/marks/supplemental/segmentLabelSpec.types.ts
Chart-level / shared features
Axis (axis)
Renders the chart's coordinate axis: tick marks, labels (with alignment/formatting/orientation/truncation), gridlines, baseline, and hosts child annotations/reference lines/thumbnails.
- Applies to:
chart - Related tokens:
DEFAULT_GRANULARITY,DEFAULT_LABEL_ALIGN,DEFAULT_LABEL_FONT_WEIGHT,DEFAULT_LABEL_ORIENTATION,DEFAULT_LABEL_POSITION,DEFAULT_LOCALE,MAX_THUMBNAIL_SIZE,MIN_THUMBNAIL_SIZE,THUMBNAIL_OFFSET - RSC support: S1 ✅, S2 ✅
- Canonical parameter shape:
AxisOptionsinpackages/vega-spec-builder-s2/src/types/axis/axisSpec.types.ts - Builder implementation:
packages/vega-spec-builder-s2/src/axis/axisSpecBuilder.ts
Legend (legend)
Renders a key mapping color/line-type/opacity/symbol-shape facets to series names, with optional interactivity (click-to-toggle/highlight series) and a popover child.
- Applies to:
chart - Related tokens:
DEFAULT_LEGEND_SYMBOL_SIZE,DEFAULT_LEGEND_SYMBOL_WIDTH,DEFAULT_LEGEND_COLUMN_PADDING,DEFAULT_LEGEND_LABEL_LIMIT,DEFAULT_HIDDEN_SERIES - RSC support: S1 ✅, S2 ✅
- Canonical parameter shape:
LegendOptionsinpackages/vega-spec-builder-s2/src/types/legendSpec.types.ts - Builder implementation:
packages/vega-spec-builder-s2/src/legend/legendSpecBuilder.ts
Chart Popover (chart-popover)
Opens a click-triggered (or right-click) floating detail panel anchored to a mark/data point, with configurable sizing and margins.
- Applies to:
area,bar,donut,line,scatter,venn,legend - Related tokens:
HOVERED_ITEM,SELECTED_ITEM,SELECTED_SERIES,SELECTED_GROUP - RSC support: S1 ✅, S2 ✅
- Canonical parameter shape:
ChartPopoverOptionsinpackages/vega-spec-builder-s2/src/types/dialogs/chartPopoverSpec.types.ts - Builder implementation:
packages/vega-spec-builder-s2/src/chartPopover/chartPopoverUtils.ts
Chart Inspect (chart-inspect)
Hover-triggered inspect/highlight behavior that shows detail without requiring a click, with configurable highlight scope and exclusion of specific data rows.
- Applies to:
area,bar,donut,line,scatter,venn,trendline,metric-range - Related tokens:
HOVERED_ITEM,HOVERED_SERIES - RSC support: S1 ❌, S2 ✅
- Canonical parameter shape:
ChartInspectOptionsinpackages/vega-spec-builder-s2/src/types/dialogs/chartInspectSpec.types.ts - Builder implementation:
packages/vega-spec-builder-s2/src/chartInspect/chartInspectUtils.ts
Title (title)
Renders the chart's title text at a configurable position/orientation with size/weight styling.
- Applies to:
chart - Related tokens:
DEFAULT_TITLE_FONT_WEIGHT,DEFAULT_FONT_SIZE - RSC support: S1 ✅, S2 ✅
- Canonical parameter shape:
TitleOptionsinpackages/vega-spec-builder-s2/src/types/titleSpec.types.ts - Builder implementation:
packages/vega-spec-builder-s2/src/title/titleSpecBuilder.ts
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

