Timeseries Areas & Uncertainty Bands

Visualize uncertainty, error bands, and confidence intervals using high/low area rendering in LineChart.

Overview

LineChart supports rendering filled areas between upper (high) and lower (low) bounds, perfect for:

Statistical confidence intervals
Error margins and standard deviation bands
Forecasting uncertainty
Target ranges
Min/max envelopes

The library provides utility functions to generate these bounds from your data.

Confidence Intervals

Statistical confidence bands show the range where the true value likely falls.

import { LineChart, addConfidenceInterval } from '@vuer-ai/vuer-viz';

// Generate sample data
const x = Array.from({ length: 50 }, (_, i) => i);
const y = x.map(val => Math.sin(val / 5) * 20 + 50 + (Math.random() - 0.5) * 10);

// Add 95% confidence interval
const { high, low } = addConfidenceInterval(x, y, 0.95);

export default function ConfidenceIntervalExample() {
  return (
    <LineChart
      series={[
        {
          label: 'Measurements',
          x,
          y,
          high,
          low,
          color: '#3498db',
          fillColor: '#3498db',
          fillOpacity: 0.2,
        },
      ]}
      title="95% Confidence Interval"
      xLabel="Time"
      yLabel="Value"
      width={770}
    />
  );
}

Use addConfidenceInterval() to automatically calculate confidence bounds:

import { addConfidenceInterval } from '@vuer-ai/vuer-viz';

const { high, low } = addConfidenceInterval(x, y, 0.95); // 95% confidence

Moving Average with Error Bands

Smooth noisy data while showing variability using standard deviation bands.

import { LineChart, movingAverageWithBands } from '@vuer-ai/vuer-viz';

// Generate noisy data
const x = Array.from({ length: 100 }, (_, i) => i);
const rawY = x.map(val => Math.sin(val / 10) * 30 + 50 + (Math.random() - 0.5) * 15);

// Apply moving average with 2 standard deviation bands
const smoothed = movingAverageWithBands(x, rawY, 10, 2);

export default function MovingAverageExample() {
  return (
    <LineChart
      series={[
        {
          label: 'Raw Data',
          x,
          y: rawY,
          color: '#95a5a6',
          lineWidth: 1,
          fillOpacity: 0,
        },
        {
          label: 'Smoothed (±2σ)',
          x,
          y: smoothed.y,
          high: smoothed.high,
          low: smoothed.low,
          color: '#e74c3c',
          fillColor: '#e74c3c',
          fillOpacity: 0.15,
          lineWidth: 2,
        },
      ]}
      title="Moving Average with Error Bands"
      xLabel="Time"
      yLabel="Value"
      width={770}
    />
  );
}

The movingAverageWithBands() function returns smoothed values with error bands:

import { movingAverageWithBands } from '@vuer-ai/vuer-viz';

const { y, high, low } = movingAverageWithBands(x, rawY, 10, 2); // window=10, ±2σ

Prediction Bounds

Show expanding uncertainty in forecasts as predictions extend further into the future.

import { LineChart, addPredictionBounds } from '@vuer-ai/vuer-viz';

// Historical data
const histX = Array.from({ length: 40 }, (_, i) => i);
const histY = histX.map(val => 50 + val * 0.5 + Math.sin(val / 5) * 10);

// Future prediction
const futureX = Array.from({ length: 20 }, (_, i) => 40 + i);
const futureY = futureX.map(val => 50 + val * 0.5 + Math.sin(val / 5) * 10);

// Add expanding uncertainty
const { high, low } = addPredictionBounds(futureX, futureY, 0.08);

export default function PredictionBoundsExample() {
  return (
    <LineChart
      series={[
        {
          label: 'Historical',
          x: histX,
          y: histY,
          color: '#2ecc71',
          lineWidth: 2,
        },
        {
          label: 'Forecast',
          x: futureX,
          y: futureY,
          high,
          low,
          color: '#9b59b6',
          fillColor: '#9b59b6',
          fillOpacity: 0.2,
          lineWidth: 2,
          dashArray: '5 5',
        },
      ]}
      title="Forecast with Expanding Uncertainty"
      xLabel="Time"
      yLabel="Value"
      width={770}
    />
  );
}

Use addPredictionBounds() for forecasts with growing uncertainty:

import { addPredictionBounds } from '@vuer-ai/vuer-viz';

const { high, low } = addPredictionBounds(futureX, futureY, 0.08); // 8% growth per step

Percentage-Based Margins

Define target ranges as percentages above and below the target line.

import { LineChart, addPercentageMargin } from '@vuer-ai/vuer-viz';

// Generate trend data
const x = Array.from({ length: 60 }, (_, i) => i);
const y = x.map(val => 30 + val * 0.8);

// Add ±20% margin
const { high, low } = addPercentageMargin(x, y, 0.2);

export default function PercentageMarginExample() {
  return (
    <LineChart
      series={[
        {
          label: 'Target ±20%',
          x,
          y,
          high,
          low,
          color: '#f39c12',
          fillColor: '#f39c12',
          fillOpacity: 0.15,
          lineWidth: 2,
        },
      ]}
      title="Target Range with Percentage Bounds"
      xLabel="Time"
      yLabel="Value"
      width={770}
    />
  );
}

Use addPercentageMargin() for simple percentage bounds:

import { addPercentageMargin } from '@vuer-ai/vuer-viz';

const { high, low } = addPercentageMargin(x, y, 0.2); // ±20%

Canvas Rendering for Large Datasets

Handle thousands of points efficiently using canvas rendering.

import { LineChart, addConfidenceInterval } from '@vuer-ai/vuer-viz';

// Generate large dataset (10,000 points)
const x = Array.from({ length: 10000 }, (_, i) => i);
const y = x.map(val => Math.sin(val / 100) * 30 + 50 + (Math.random() - 0.5) * 5);

// Add confidence interval
const { high, low } = addConfidenceInterval(x, y, 0.95);

export default function CanvasPerformanceExample() {
  return (
    <LineChart
      series={[
        {
          label: '10k Points',
          x,
          y,
          high,
          low,
          color: '#16a085',
          fillColor: '#16a085',
          fillOpacity: 0.2,
        },
      ]}
      title="Large Dataset with Canvas Rendering"
      xLabel="Time"
      yLabel="Value"
      width={770}
      canvas
    />
  );
}

Simply add canvas prop for high-performance rendering of large datasets:

<LineChart
  series={[{ label: '10k Points', x, y, high, low }]}
  canvas  // ← Enable canvas rendering
/>

Custom Styling

Customize fill color and opacity to match your design.

import { LineChart, addConfidenceInterval } from '@vuer-ai/vuer-viz';

// Generate data
const x = Array.from({ length: 50 }, (_, i) => i);
const y = x.map(val => 40 + val * 0.3 + Math.sin(val / 8) * 15);

// Add confidence bounds
const { high, low } = addConfidenceInterval(x, y);

export default function CustomStylingExample() {
  return (
    <LineChart
      series={[
        {
          label: 'Light Fill',
          x,
          y,
          high,
          low,
          color: '#c0392b',
          fillColor: '#e74c3c',
          fillOpacity: 0.1,
          lineWidth: 3,
        },
      ]}
      title="Custom Fill Color and Opacity"
      xLabel="Time"
      yLabel="Value"
      width={770}
    />
  );
}

Control appearance with fillColor and fillOpacity:

<LineChart
  series={[{
    label: 'Data',
    x, y, high, low,
    color: '#c0392b',        // Line color
    fillColor: '#e74c3c',    // Area fill color
    fillOpacity: 0.1,        // Area transparency
  }]}
/>

Available Utility Functions

All utility functions work with columnar data format and can be imported from @vuer-ai/vuer-viz:

Bounds Generation

addConfidenceInterval(x, y, confidence?, stdDev?) - Statistical confidence bands
addMargin(x, y, margin) - Fixed margin above/below
addPercentageMargin(x, y, percentage) - Percentage-based bounds
addPredictionBounds(x, y, uncertaintyGrowth?, baseStdDev?) - Expanding forecast uncertainty

Smoothing

movingAverageWithBands(x, y, windowSize, numStdDev?) - Smoothed data with error bands
movingAverage(x, y, windowSize) - Simple moving average
exponentialMovingAverage(x, y, alpha?) - Exponential smoothing

Columnar Data Format

All functions use an efficient columnar format where data dimensions are separate arrays:

const series = [{
  label: 'Temperature',
  x: [0, 1, 2, 3, 4],           // Time values
  y: [20, 22, 21, 23, 22],      // Measurements
  high: [22, 24, 23, 25, 24],   // Upper bound
  low: [18, 20, 19, 21, 20],    // Lower bound
}];

This format is:

Faster for large datasets (no object overhead)
More memory efficient (arrays pack tightly)
Common in data science (matches pandas, numpy conventions)

Props

LineSeries Props

Prop	Type	Description
`x`	`number[]`	X-axis values
`y`	`number[]`	Y-axis values
`high`	`number[]?`	Upper bound values
`low`	`number[]?`	Lower bound values
`fillColor`	`string?`	Area fill color (defaults to line color)
`fillOpacity`	`number?`	Area opacity 0-1 (default: 0.3)
`showArea`	`boolean?`	Explicitly enable/disable area (auto-enabled if high/low present)

← Back to Guides