Financial Design Systems

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

// lib/chart-theme.ts
export const chartColors = {
  // Gains/Losses
  positive: 'hsl(154 80% 60%)',    // Green
  negative: 'hsl(346 80% 62%)',    // Red
  neutral: 'hsl(216 90% 68%)',     // Blue
  
  // Backgrounds
  background: 'hsl(222 47% 11%)',
  surface: 'hsl(222 47% 15%)',
  grid: 'hsl(222 47% 20%)',
  
  // Text
  textPrimary: 'hsl(210 40% 98%)',
  textSecondary: 'hsl(215 20% 65%)',
  textMuted: 'hsl(215 20% 45%)',
  
  // Data series
  series: [
    'hsl(200 90% 65%)',  // Cyan
    'hsl(280 90% 65%)',  // Purple
    'hsl(45 90% 65%)',   // Gold
    'hsl(160 90% 65%)',  // Teal
    'hsl(320 90% 65%)',  // Pink
  ],
};

---

Pattern 2: Recharts Theme Config

// components/charts/chart-config.ts
import { chartColors } from '@/lib/chart-theme';

export const chartConfig = {
  // Axis styling
  axisStyle: {
    stroke: chartColors.textMuted,
    fontSize: 11,
    fontFamily: 'var(--font-mono)',
  },
  
  // Grid styling
  gridStyle: {
    stroke: chartColors.grid,
    strokeDasharray: '3 3',
  },
  
  // Tooltip styling
  tooltipStyle: {
    backgroundColor: chartColors.surface,
    border: `1px solid ${chartColors.grid}`,
    borderRadius: '8px',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
  },
};

// Custom tooltip component
export function ChartTooltip({ active, payload, label }: any) {
  if (!active || !payload) return null;

  return (
    
      {label}
      {payload.map((entry: any, index: number) => (
        
          {entry.name}: {formatCurrency(entry.value)}
        
      ))}
    
  );
}

---

Pattern 3: Price Chart Component

import {
  AreaChart,
  Area,
  XAxis,
  YAxis,
  Tooltip,
  ResponsiveContainer,
} from 'recharts';

interface PriceChartProps {
  data: { time: string; price: number }[];
  isPositive?: boolean;
}

export function PriceChart({ data, isPositive = true }: PriceChartProps) {
  const color = isPositive ? chartColors.positive : chartColors.negative;
  
  return (
    
      
        
          
            
            
          
        
        
        
        
         formatCompact(value)}
        />
        
        } />
        
        
      
    
  );
}

---

Pattern 4: Candlestick Colors

export const candlestickColors = {
  up: {
    fill: 'hsl(154 80% 60%)',
    stroke: 'hsl(154 80% 50%)',
  },
  down: {
    fill: 'hsl(346 80% 62%)',
    stroke: 'hsl(346 80% 52%)',
  },
  wick: 'hsl(215 20% 45%)',
};

// Usage with lightweight-charts or similar
const candlestickSeries = chart.addCandlestickSeries({
  upColor: candlestickColors.up.fill,
  downColor: candlestickColors.down.fill,
  borderUpColor: candlestickColors.up.stroke,
  borderDownColor: candlestickColors.down.stroke,
  wickUpColor: candlestickColors.wick,
  wickDownColor: candlestickColors.wick,
});

---

Pattern 5: Percentage Bar

interface PercentageBarProps {
  value: number;  // -100 to 100
  showLabel?: boolean;
}

export function PercentageBar({ value, showLabel = true }: PercentageBarProps) {
  const isPositive = value >= 0;
  const absValue = Math.min(Math.abs(value), 100);

  return (
    
      {/* Negative side */}
      
        {!isPositive && (
          
        )}
      
      
      {/* Center divider */}
      
      
      {/* Positive side */}
      
        {isPositive && (
          
        )}
      
      
      {showLabel && (
        
          {formatPercentage(value)}
        
      )}
    
  );
}

---

Pattern 6: Mini Sparkline

interface SparklineProps {
  data: number[];
  width?: number;
  height?: number;
}

export function Sparkline({ data, width = 80, height = 24 }: SparklineProps) {
  const first = data[0];
  const last = data[data.length - 1];
  const isPositive = last >= first;
  const color = isPositive ? chartColors.positive : chartColors.negative;

  const min = Math.min(...data);
  const max = Math.max(...data);
  const range = max - min || 1;

  const points = data
    .map((value, i) => {
      const x = (i / (data.length - 1)) * width;
      const y = height - ((value - min) / range) * height;
      return `${x},${y}`;
    })
    .join(' ');

  return (
    
      
    
  );
}

---

Pattern 7: Chart Legend

interface LegendItem {
  label: string;
  color: string;
  value?: string;
}

export function ChartLegend({ items }: { items: LegendItem[] }) {
  return (
    
      {items.map((item) => (
        
          
          {item.label}
          {item.value && (
            {item.value}
          )}
        
      ))}
    
  );
}

---

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

// Color assignment
const color = value >= 0 ? chartColors.positive : chartColors.negative;

// Gradient definition

  
  


// Axis styling


// Tooltip styling