Premium Charts Showcase
All available chart components in one place
Demo Chart Components
These are premium, animated financial charts designed for trading dashboards. All charts use mock data for demonstration purposes.
1. Trading Line / Area Charts
Real-time price movement visualization with gradient fills
SOL/USD Price Chart
24h High
—
24h Low
—
24h Volume
—
BTC/USD Price Chart
24h High
—
24h Low
—
24h Volume
—
2. Candlestick Charts
Professional OHLC charts with volume indicators
SOL/USDT - TradingView Style
Open
—
High
—
Low
—
Close
—
3. Portfolio Distribution Charts
Interactive pie and donut charts for asset breakdown
Portfolio Distribution (Donut)
Total Value: $43,527.1
Total Assets
$43.5K
+12.5%
SOL
35.0%
$15,234.5
BTC
25.0%
$10,881.78
ETH
20.0%
$8,705.42
USDC
12.0%
$5,223.13
Others
8.0%
$3,482.27
Best Performer
SOL +24%
Total Assets
5 Tokens
24h Change
+$1,234.56
Asset Allocation (Pie)
Total Value: $43,527.1
Total Assets
$43.5K
+12.5%
SOL
35.0%
$15,234.5
BTC
25.0%
$10,881.78
ETH
20.0%
$8,705.42
USDC
12.0%
$5,223.13
Others
8.0%
$3,482.27
Best Performer
SOL +24%
Total Assets
5 Tokens
24h Change
+$1,234.56
4. Volume & Performance Charts
Bar charts for volume analysis and market movers
24h Trading Volume
Total: $87.76M
Peak Hour
04 AM
Avg Volume
$3.66M
Data Points
24
Top Gainers
Avg: 28.41%
Top Performer
MATIC
Avg Change
28.41%
Data Points
8
Top Losers
Avg: 22.17%
Top Performer
MATIC
Avg Change
22.17%
Data Points
8
5. Mini Sparkline Charts
Compact inline charts perfect for cards and tables
SOL
Solana
$142.34
BTC
Solana
$67,234
ETH
Solana
$3,456
AVAX
Solana
$38.92
✨ Chart Features
What makes these charts premium
Smooth Animations
All charts feature fluid animations with customizable easing and duration
Interactive Tooltips
Rich tooltips with backdrop blur and detailed information on hover
Timeframe Selectors
Easy switching between different time periods (24h, 7d, 30d)
Color Coded
Intuitive green/red color scheme for profit/loss visualization
Responsive Design
Fully responsive charts that adapt to any screen size
Dark Mode Optimized
Beautiful dark theme with high contrast and readability
📚 Usage & Integration
Location: All chart components are in components/charts/
Pages: See these charts in action on the Analytics and Quick Trade pages
Documentation: Full component docs available in components/charts/README.md
Customization: All charts accept custom data via props. Currently using mock data generators for demo purposes.