mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-10-30 18:22:59 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
65 lines
1.5 KiB
Plaintext
65 lines
1.5 KiB
Plaintext
---
|
|
title: Area Chart
|
|
description: Area charts for visualizing trends and cumulative values over time.
|
|
---
|
|
|
|
<ComponentPreview name="chart-demo" description="Area chart example" />
|
|
|
|
## Overview
|
|
|
|
Area charts are used to show trends over time or across categories. They combine line charts with filled areas beneath the line to emphasize volume.
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@hanzo/ui"
|
|
import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
|
|
|
|
const data = [
|
|
{ month: "Jan", desktop: 186, mobile: 80 },
|
|
{ month: "Feb", desktop: 305, mobile: 200 },
|
|
{ month: "Mar", desktop: 237, mobile: 120 },
|
|
]
|
|
|
|
const config = {
|
|
desktop: { label: "Desktop", color: "hsl(var(--chart-1))" },
|
|
mobile: { label: "Mobile", color: "hsl(var(--chart-2))" },
|
|
}
|
|
|
|
export function AreaChartDemo() {
|
|
return (
|
|
<ChartContainer config={config}>
|
|
<AreaChart data={data}>
|
|
<CartesianGrid vertical={false} />
|
|
<XAxis dataKey="month" />
|
|
<ChartTooltip content={<ChartTooltipContent />} />
|
|
<Area
|
|
dataKey="desktop"
|
|
fill="var(--color-desktop)"
|
|
stroke="var(--color-desktop)"
|
|
/>
|
|
<Area
|
|
dataKey="mobile"
|
|
fill="var(--color-mobile)"
|
|
stroke="var(--color-mobile)"
|
|
/>
|
|
</AreaChart>
|
|
</ChartContainer>
|
|
)
|
|
}
|
|
```
|
|
|
|
## Variants
|
|
|
|
### Stacked Area
|
|
|
|
Stack multiple areas to show cumulative totals.
|
|
|
|
### Gradient Fill
|
|
|
|
Apply gradient fills for visual depth.
|
|
|
|
### Step Area
|
|
|
|
Use `type="step"` for discrete step transitions.
|