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
62 lines
1.6 KiB
Plaintext
62 lines
1.6 KiB
Plaintext
---
|
|
title: Chart Tooltip
|
|
description: Customizable tooltip component for all chart types.
|
|
---
|
|
|
|
## Overview
|
|
|
|
The chart tooltip component provides a consistent, themed tooltip across all chart types. It integrates with the chart config system for automatic label and color resolution.
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { ChartTooltip, ChartTooltipContent } from "@hanzo/ui"
|
|
|
|
// Inside any chart component:
|
|
;<ChartTooltip content={<ChartTooltipContent />} />
|
|
```
|
|
|
|
## Props
|
|
|
|
### ChartTooltipContent
|
|
|
|
| Prop | Type | Default | Description |
|
|
| ------------- | --------------------------- | ------- | ------------------------- |
|
|
| hideLabel | boolean | false | Hide the label in tooltip |
|
|
| hideIndicator | boolean | false | Hide the color indicator |
|
|
| indicator | "line" \| "dot" \| "dashed" | "dot" | Indicator style |
|
|
| nameKey | string | - | Key for item names |
|
|
| labelKey | string | - | Key for labels |
|
|
|
|
## Customization
|
|
|
|
### Custom Formatter
|
|
|
|
```tsx
|
|
<ChartTooltip
|
|
content={
|
|
<ChartTooltipContent
|
|
formatter={(value, name) => (
|
|
<span>
|
|
{name}: ${value.toLocaleString()}
|
|
</span>
|
|
)}
|
|
/>
|
|
}
|
|
/>
|
|
```
|
|
|
|
### Custom Label
|
|
|
|
```tsx
|
|
<ChartTooltip
|
|
content={<ChartTooltipContent labelFormatter={(label) => `Date: ${label}`} />}
|
|
/>
|
|
```
|
|
|
|
## Indicator Styles
|
|
|
|
- **dot** - Small colored circle (default)
|
|
- **line** - Colored line indicator
|
|
- **dashed** - Dashed line indicator
|