shield_lock
JinDaGe
← Back to skills
extension
Category: Development & EngineeringNo API key required

example

Please provide the description content that needs to be translated.

personAuthor: jakexiaohubgithub
open_in_newRepositorydownloadDownload package

Example Construction

This skill provides the foundational patterns for building examples across all AG products. Load the appropriate product guide based on what you're working with.

When to Use

  • Creating or modifying any example (gallery, docs, or Plunker)
  • Understanding chart construction patterns, module registration, or controls
  • Troubleshooting example issues (TypeScript errors, rendering problems)
  • Checking enterprise vs community feature requirements

Product Detection

Determine which product guide to load:

  • AG Charts: Working in ag-charts-* packages, chart-related examples, or user mentions charts
  • AG Grid: Working in ag-grid-* packages, grid-related examples, or user mentions grid
  • AG Studio: Working in ag-studio-* packages or user mentions studio

Product Guides

| Product | Guide Directory | Status | |---------|----------------|--------| | AG Charts | .rulesync/skills/example/ag-charts/ | Complete | | AG Grid | .rulesync/skills/example/ag-grid/ | Placeholder | | AG Studio | .rulesync/skills/example/ag-studio/ | Placeholder |

AG Charts Sub-Documents

Core Documents (load as needed)

| Document | Purpose | When to Load | |----------|---------|-------------| | chart-construction.md | Axes, modules, container, controls, updates | Always for new examples | | quality-rules.md | Styling rules, formatters, deprecated APIs | Always when editing examples | | enterprise-features.md | Enterprise vs community matrix | When deciding imports/CDN | | validation.md | Build and validate commands | Before committing | | examples-guide.md | Repo paths, guidelines, validation, Plnkr integration | When working with example infrastructure | | framework-patterns.md | Framework transformation technical reference | When debugging framework generation issues |

Progressive Feature Modules (AG Charts)

Feature modules live in .rulesync/skills/example/ag-charts/features/ and provide deep guidance on specific chart features. Load based on need.

| Tier | Files | When to Load | |------|-------|-------------| | Tier 1 — Essentials | tooltips.md, theme-overrides.md | Always for quality work | | Tier 2 — Enhancement | axes.md, legends.md, data-labels.md | When improving visual hierarchy, readability, or layout | | Tier 3 — Advanced | enterprise.md, segmentation.md, reference-lines.md, recent-features.md | When PREVis identifies specific advanced needs |

Quick Reference — Critical Rules

These five rules apply to every AG Charts example. Internalise them before reading sub-documents.

  1. No hardcoded colours or fonts. Never set fill, stroke, color, fontSize, fontWeight, or fontFamily. The theme handles all visual styling.

  2. Object-based axes syntax (v13+). Use axes: { x: { type: 'category' }, y: { type: 'number' } } — not the legacy array syntax. Always specify type on every axis.

  3. Root-level formatters. Prefer formatter: { y: ..., x: ... } at the options root so axes, labels, and tooltips share one definition. Only nest formatters when they genuinely differ.

  4. Tooltip heading required. When using a custom tooltip renderer, always include heading in the return object to prevent empty lines. heading is the primary label at the top (category name for pie/donut, x-axis value for cartesian); title is the series name.

  5. Specific chart option types. Use AgCartesianChartOptions for cartesian charts and AgPolarChartOptions for polar charts. Hierarchy charts (treemap, sunburst) use generic AgChartOptions. Financial charts use AgFinancialChartOptions.