FlowGL Chart

Quick Start

import { FlowGL } from "@chartts/gl"
 
const chart = FlowGL("#chart", {
  data: { series: [] },
  animate: true,
})

That renders a mesmerizing flow field with thousands of animated particles following a swirling vector field. Particles are colored by speed (deep blue for slow, cyan for medium, amber for fast), sized by velocity, and fade with age. Direction arrows overlay the field, and a speed legend appears in the bottom-right corner.

When to Use FlowGL Charts

Flow visualizations show how data moves through a space. They are inherently animated and work best for directional, velocity-based data.

Use a FlowGL chart when:

• Visualizing wind patterns, ocean currents, or atmospheric flow
• Showing data movement through a system (network traffic, user flows)
• You want an animated, attention-grabbing hero visualization
• Displaying vector field data with direction and magnitude

Don't use a FlowGL chart when:

• The data is static with no directional component (use a heatmap)
• Precise value reading is needed (particles are approximate)
• The visualization needs to work without animation
• Server-side rendering is required (animated WebGL needs a browser)

Props Reference

Additional options passed through the options object:

Built-In Field Types

FlowGL includes five procedural vector fields that demonstrate different flow patterns.

Swirl (default)

A spiral flow with outward currents and inner vortex structure.

FlowGL("#chart", {
  data: { series: [] },
  fieldType: "swirl",
})

Wind

A predominantly left-to-right flow with sinusoidal gusts and vertical turbulence. Simulates weather-like wind patterns.

FlowGL("#chart", {
  data: { series: [] },
  fieldType: "wind",
})

Vortex

A single strong vortex centered in the viewport with particles spiraling inward. Resembles a whirlpool or tornado viewed from above.

FlowGL("#chart", {
  data: { series: [] },
  fieldType: "vortex",
})

Source

Two sources and one sink creating a push-pull flow pattern. Particles stream outward from sources and converge on the sink.

FlowGL("#chart", {
  data: { series: [] },
  fieldType: "source",
})

Turbulence

Chaotic multi-frequency flow with no dominant direction. Simulates turbulent fluid dynamics.

FlowGL("#chart", {
  data: { series: [] },
  fieldType: "turbulence",
})

Custom Vector Fields

Supply your own vector field using grid data. The grid is a 2D array where each row contains alternating vx and vy values. The grid is sampled bilinearly across the viewport.

const rows = 20, cols = 20
const grid: number[][] = []
for (let r = 0; r < rows; r++) {
  const row: number[] = []
  for (let c = 0; c < cols; c++) {
    const angle = Math.atan2(r - rows / 2, c - cols / 2)
    const speed = 2
    row.push(Math.cos(angle) * speed) // vx
    row.push(Math.sin(angle) * speed) // vy
  }
  grid.push(row)
}
 
FlowGL("#chart", {
  data: { series: [], grid },
})

Velocity-Based Coloring

Particles are colored on a three-stop gradient based on their instantaneous speed. The color ramp maps from colorSlow through colorMid to colorFast. This creates a natural visualization where stagnant areas appear dark and fast-flowing areas glow bright.

FlowGL("#chart", {
  data: { series: [] },
  colorSlow: "#1a1a2e",
  colorMid: "#16a085",
  colorFast: "#e74c3c",
  fieldType: "wind",
})

Particle size also scales with speed when sizeBySpeed is above 0. Fast particles appear larger, reinforcing the velocity encoding.

Accessibility

• Direction arrows provide a static reference for the flow pattern without relying on animation
• Speed legend shows the color-to-speed mapping with "Slow" and "Fast" labels
• The three-stop color gradient uses distinct hue shifts (blue to cyan to amber) for color-blind friendliness
• Animation can be paused by setting animate: false for a static snapshot

Real-World Examples

Weather wind visualization

FlowGL("#wind", {
  data: { series: [] },
  fieldType: "wind",
  particleCount: 8000,
  colorSlow: "#0a1628",
  colorMid: "#38bdf8",
  colorFast: "#fbbf24",
  showArrows: true,
  arrowDensity: 10,
  theme: "dark",
})

Network traffic flow

FlowGL("#traffic", {
  data: { series: [] },
  fieldType: "source",
  particleCount: 6000,
  pointSize: 3,
  colorSlow: "#1e293b",
  colorMid: "#22d3ee",
  colorFast: "#f472b6",
  showLegend: true,
})

Fluid dynamics simulation

FlowGL("#fluid", {
  data: { series: [] },
  fieldType: "turbulence",
  particleCount: 15000,
  pointSize: 2,
  ageSpeed: 0.004,
  sizeBySpeed: 0.9,
  showArrows: false,
  theme: "dark",
})