Financial Data Visualization

Build dark-themed financial charts and visualizations that are readable, beautiful, and consistent with modern trading UIs.

When to Use

• - Building trading dashboards with charts
• Displaying portfolio performance
• Showing price history and trends
• Any financial data visualization

Pattern 1: Chart Color Palette

CODEBLOCK0

Pattern 2: Recharts Theme Config

CODEBLOCK1

Pattern 3: Price Chart Component

CODEBLOCK2

Pattern 4: Candlestick Colors

CODEBLOCK3

Pattern 5: Percentage Bar

CODEBLOCK4

Pattern 6: Mini Sparkline

CODEBLOCK5

Pattern 7: Chart Legend

CODEBLOCK6

Related Skills

• - Meta-skill: ai/skills/meta/design-system-creation/ — Complete design system workflow
• animated-financial-display — Number animations and value flash effects
• dual-stream-architecture — Real-time data streaming patterns

NEVER Do

• - Use light theme colors — Ensure sufficient contrast on dark backgrounds
• Use red/green without considering colorblind users — Add shapes or patterns
• Skip grid lines — They help read values
• Use thick strokes — 1-2px is optimal for data lines
• Animate charts on every data point — Reserve animation for initial load

Quick Reference

CODEBLOCK7