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.

Informações da origem

Repositório
adobe/react-spectrum-charts
Última atividade na origem
15 de outubro de 2026 às 22:47
Idioma detectado do SKILL.md
inglês
Estrelas
129
Forks
30

Opções de instalação

Por padrão, está selecionado o prompt que primeiro revisa a origem. Você pode mudar para um comando direto ou baixar uma cópia local.

Revise os arquivos de origem

Leia o SKILL.md e os arquivos complementares exibidos pelo SkillsMP antes de decidir se vai instalar.

Exibindo SKILL.md

SKILL.md
Instruções da origem · Visualização somente leitura
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
Ver no GitHub
Este SKILL.md e muito grande, entao o SkillsMP mostra aqui apenas a primeira secao. Ver no GitHub