agentleFS
adobeadobe/react-spectrum-charts/.agents/skills/chart-features/SKILL.md

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.

The file

Files
SKILL.md

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
  • Canonical parameter shape: DonutSummaryOptions in packages/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 rc import path, S2 via rc import path — not yet in the stable barrel, but alpha/rc components are considered supported
  • Canonical parameter shape: SegmentLabelOptions in packages/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: AxisOptions in packages/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: LegendOptions in packages/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: ChartPopoverOptions in packages/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: ChartInspectOptions in packages/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: TitleOptions in packages/vega-spec-builder-s2/src/types/titleSpec.types.ts
  • Builder implementation: packages/vega-spec-builder-s2/src/title/titleSpecBuilder.ts

Download now (ZIP)

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
What did you use it for? e.g. Reviewing pull requests in a Rails app

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.