Stats Card Template

Display metrics, KPIs, and statistics with trend indicators.

Template ID

template: "stats"

Preview

Data-focused layout featuring:

• Large, prominent statistic
• Descriptive label
• Trend indicator (up/down/neutral)
• Percentage change
• Clean, dashboard aesthetic

Parameters

Parameter	Type	Required	Description
stat_value	string	Yes	Main statistic (e.g., "$1.2M")
stat_label	string	No	What the stat represents
trend_icon	string	No	up, down, or neutral
trend_value	string	No	Change amount (e.g., "+24%")
title	string	No	Card title/header
theme	string	No	dark (default) or light
logo_url	string	No	Brand logo

Example Request

curl -X POST https://ogimageapi.io/api/generate \
  -H "Content-Type: application/json" \
  -H "X-API-Key: YOUR_API_KEY" \
  -d '{
    "stat_value": "$1.2M",
    "stat_label": "Monthly Recurring Revenue",
    "trend_icon": "up",
    "trend_value": "+24% vs last month",
    "title": "Revenue Dashboard",
    "template": "stats",
    "theme": "dark"
  }' \
  --output stats-og.png

Layout Structure

┌─────────────────────────────────────────┐
│                                         │
│   Revenue Dashboard              [Logo] │
│                                         │
│                                         │
│            $1.2M                        │
│                                         │
│     Monthly Recurring Revenue           │
│                                         │
│         ↑ +24% vs last month            │
│                                         │
└─────────────────────────────────────────┘

Trend Icons

Value	Display	Color
up	↑	Green
down	↓	Red
neutral	→	Gray

Theme Variations

Dark Theme

• Professional, modern dashboard look
• Numbers really pop
• Great for investor updates

Light Theme

• Clean, report-style
• Professional presentations
• Better for formal contexts

Use Cases

Context	Recommended Setup
Startup metrics	Dark theme + up trend
Financial reports	Light theme
Product analytics	Dark theme
Sales dashboards	Either theme
Investor updates	Dark theme

Best Practices

1. One metric per card — Focus is key
2. Always show trend — Context matters
3. Use meaningful labels — Be specific
4. Format numbers — Use $, %, commas

Integration Examples

Dashboard Share Cards

async function generateMetricCard(metric) {
  const trend = metric.change > 0 ? 'up' : 
                metric.change < 0 ? 'down' : 'neutral';
  const changeStr = metric.change > 0 ? `+${metric.change}%` : `${metric.change}%`;
  
  const response = await fetch('https://ogimageapi.io/api/generate', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-API-Key': process.env.OG_IMAGE_API_KEY
    },
    body: JSON.stringify({
      stat_value: formatMetricValue(metric.value, metric.type),
      stat_label: metric.name,
      trend_icon: trend,
      trend_value: `${changeStr} vs last period`,
      title: 'Key Metrics',
      template: 'stats',
      theme: 'dark'
    })
  });
  
  return response;
}

function formatMetricValue(value, type) {
  switch (type) {
    case 'currency': return `$${(value / 1000000).toFixed(1)}M`;
    case 'percentage': return `${value}%`;
    case 'count': return value.toLocaleString();
    default: return String(value);
  }
}

Scheduled Report Images

// Generate weekly metric snapshots
async function generateWeeklyReport(metrics) {
  const images = await Promise.all(
    metrics.map(m => generateMetricCard(m))
  );
  
  // Save images...
  return images;
}

Stat Value Formatting

Type	Example Input	Recommended Format
Revenue	1234567	"$1.2M"
Users	50000	"50K"
Percentage	0.24	"24%"
Count	1000000	"1,000,000"
Time	45	"45s"

Related Templates

• Social Share — For sharing achievements
• Event — For milestone announcements