Financial Design Systems

---

name: financial-data-visualization model: standard description: Patterns for building dark-themed financial charts and data visualizations. Covers chart theming, color scales for gains/losses, and real-time data display. Use when building trading dashboards or financial analytics. Triggers on chart theme, data visualization, financial chart, dark theme, gains losses, trading UI.

---

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 && (
          
${absValue}% }}
          />
        )}
      
      
      {/* Center divider */}
      

      
      {/* Positive side */}
      

        {isPositive && (
          
${absValue}% }}
          />
        )}
      
      
      {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