Forecast Chart Examples

The ForecastChart component creates TradingView-style forecast visualizations with historical data, current values, and future projections with confidence bands.

Basic Forecast Chart

import { ForecastChart } from '../src/charts/forecast';

// Historical data (past 2 years)
const historicalData = [
  { date: '2024-01-01', value: 100 },
  { date: '2024-02-01', value: 105 },
  { date: '2024-03-01', value: 110 },
  { date: '2024-04-01', value: 115 },
  { date: '2024-05-01', value: 120 },
  { date: '2024-06-01', value: 125 },
  { date: '2024-07-01', value: 130 },
  { date: '2024-08-01', value: 135 },
  { date: '2024-09-01', value: 140 },
  { date: '2024-10-01', value: 145 },
  { date: '2024-11-01', value: 150 },
  { date: '2024-12-01', value: 155 },
  { date: '2025-01-01', value: 160 },
  { date: '2025-02-01', value: 165 },
  { date: '2025-03-01', value: 170 },
  { date: '2025-04-01', value: 175 },
  { date: '2025-05-01', value: 180 },
  { date: '2025-06-01', value: 185 },
  { date: '2025-07-01', value: 190 },
  { date: '2025-08-01', value: 191.49 },
];

// Forecast scenarios
const scenarios = [
  {
    label: 'Min',
    growthRate: -47.78,
    color: '#E74C3C',
    showBand: true,
    bandOpacity: 0.15,
  },
  {
    label: 'Avg',
    growthRate: 16.73,
    color: '#5DD39E',
    showBand: true,
    bandOpacity: 0.15,
  },
  {
    label: 'Max',
    growthRate: 103.52,
    color: '#5DD39E',
    showBand: true,
    bandOpacity: 0.15,
  },
];

const chart = ForecastChart({
  width: 1200,
  height: 500,
  title: 'KPI Estimate or Testet',
  historicalData: historicalData,
  currentValue: 191.49,
  currentDate: '2025-08-01',
  scenarios: scenarios,
  historicalLabel: 'PAST 2Y',
  forecastLabel: '1Y FORECAST',
  lineColor: '#2962FF',
  lineWidth: 2.5,
  showGrid: true,
  gridColor: '#E0E0E0',
  numberFormat: '.2f',
  dateFormat: '%b %Y',
  showScenarioLabels: true,
  showCurrentMarker: true,
  currentMarkerColor: '#1E40AF',
  animate: true,
  animationDuration: 1000,
  showTooltips: true,
});

document.body.appendChild(chart);

Features

1. Historical Data Line

• Displays past performance with smooth curve
• Supports animation on load
• Customizable color and line width

2. Current Value Marker

• Vertical dashed line at current date
• Highlighted dot with value label
• Distinguishes past from future

3. Forecast Scenarios

• Multiple scenarios (min, avg, max)
• Dashed lines for projections
• Color-coded by growth direction

4. Confidence Bands

• Shaded area between min and max
• Separate colors for positive/negative
• Adjustable opacity

5. Scenario Labels

• Growth rate percentages
• Final forecasted values
• Color-coded badges

6. Interactive Tooltips

• Hover to see dates
• Context-aware information
• Clean, modern design

Configuration Options

Required Options

{
  historicalData: HistoricalDataPoint[];  // Min 2 points
  currentValue: number;                    // Current value
  currentDate: string | number | Date;    // Current date
  scenarios: ForecastScenario[];          // Min 1, max 5
}

Optional Styling

{
  width: 1200,              // Chart width (default: 1200)
  height: 500,              // Chart height (default: 500)
  title: 'Chart Title',     // Optional title
  lineColor: '#2962FF',     // Historical line color
  lineWidth: 2.5,           // Line width in pixels
  showGrid: true,           // Show grid lines
  gridColor: '#E0E0E0',     // Grid color
}

Formatting Options

{
  numberFormat: '.2f',      // D3 format string (default: '.2f')
  dateFormat: '%b %Y',      // D3 time format (default: '%b %Y')
  yAxisLabel: 'Value',      // Y-axis label
}

Behavior Options

{
  animate: true,                 // Animate on load
  animationDuration: 1000,       // Duration in ms
  showTooltips: true,            // Enable tooltips
  showScenarioLabels: true,      // Show scenario badges
  showCurrentMarker: true,       // Show current marker
  currentMarkerColor: '#1E40AF', // Current marker color
}

Margin Configuration

{
  margin: {
    top: 40,
    right: 120,    // Extra space for scenario labels
    bottom: 60,
    left: 80,
  }
}

Scenario Configuration

Each scenario supports:

{
  label: 'Avg',              // Scenario name
  growthRate: 16.73,         // Growth percentage
  color: '#5DD39E',          // Line and badge color
  showBand: true,            // Show confidence band
  bandOpacity: 0.15,         // Band opacity (0-1)
}

Validation and Warnings

The chart includes comprehensive validation:

Errors (Will prevent rendering)

• Missing required fields
• Invalid data types
• Empty or insufficient data
• Growth rate < -100%

Warnings (Will render with console warnings)

• Less than 10 historical data points
• Current date before last historical date
• Extreme growth rates (>200%)
• Unordered scenarios

Examples

Stock Price Forecast

ForecastChart({
  historicalData: stockPrices,
  currentValue: 191.49,
  currentDate: '2025-08-01',
  scenarios: [
    { label: 'Bear', growthRate: -30, color: '#E74C3C' },
    { label: 'Base', growthRate: 15, color: '#3498DB' },
    { label: 'Bull', growthRate: 80, color: '#5DD39E' },
  ],
  title: 'Stock Price Forecast',
  yAxisLabel: 'Price ($)',
});

Revenue Projection

ForecastChart({
  historicalData: revenueHistory,
  currentValue: 2500000,
  currentDate: '2025-12-31',
  scenarios: [
    { label: 'Conservative', growthRate: 5 },
    { label: 'Expected', growthRate: 20 },
    { label: 'Optimistic', growthRate: 50 },
  ],
  title: 'Annual Revenue Forecast',
  yAxisLabel: 'Revenue ($)',
  numberFormat: '$,.0f',
});

User Growth Forecast

ForecastChart({
  historicalData: userGrowth,
  currentValue: 50000,
  currentDate: new Date(),
  scenarios: [
    { label: 'Slow', growthRate: 10 },
    { label: 'Moderate', growthRate: 40 },
    { label: 'Rapid', growthRate: 100 },
  ],
  title: 'User Growth Projection',
  yAxisLabel: 'Total Users',
  numberFormat: ',.0f',
  historicalLabel: 'PAST 1Y',
  forecastLabel: '1Y PROJECTION',
});

Theme Support

The chart uses CSS variables for theme support:

• --text-normal - Primary text
• --text-muted - Secondary text (axes, labels)
• --text-error - Error messages
• --background-secondary - Error backgrounds
• --background-modifier-border - Error borders

Works automatically with Obsidian light/dark themes.

Performance

• Efficient D3 rendering
• Animation can be disabled for large datasets
• Tooltip cleanup on unmount
• Responsive SVG with viewBox

Browser Support

• Modern browsers with ES6+ support
• D3.js v7 features
• SVG rendering required