id: chart
label: Chart
family: family-f-data
category: Display
intent: Visualize data graphically
description: Data chart visualization
composable: false
capabilities:
required_parts: []
optional_parts: []
tags: ["chart", "graph", "bar", "line", "pie", "area", "data", "visualization"]
keywords:
pain: Charts mix rendering logic and data, causing inconsistent behavior
promise: Chart structure and data binding enforced via contract
why: |
ChartPrimitive separates rendering (canvas) from data (data-rs attributes). ChartType enforces visualization type at compile-time. This guarantees consistent rendering and interaction patterns.
rules: ["CR-001", "CR-004"]
use_cases: ["analytics dashboards", "data visualization"]
related: ["avatar", "icon", "logo", "code_block", "markdown", "stat", "inline_meta", "kbd", "badge", "carousel"]
file: chart_ui.css
tokens: chart-*, size-*, space-*, radius-*, motion-*, font-*
foundation: spacing, size, radius, motion, typography, color
states: ["loading", "error"]
island: chart_boundary.rs
pillar: content_display
badges: ["SSR Safe", "Hydration Safe", "Token Driven", "Deterministic API", "Zero Drift", "Island Architecture"]
before: |
// ❌ Typical
view! {
<canvas id="chart"></canvas>
<script>renderChart(data)</script>
}
after: |
// ✅ CanonRS
view! {
<Chart data=data chart_type=ChartType::Line />
}
boundary_type: interaction
ix_group: ix_data
block: []
blocks_primitives: [stack]