Skip to content

Color Gradients & Themes

A key highlight of console-graph is its support for built-in visual color themes. This document outlines the available gradients and how they are parsed and rendered depending on the host environment (Node.js terminal vs. Browser dev console).

The 5 Built-In Gradients

When instantiating a graph or pushing metrics, you can configure the theme via the gradient option.

new ConsoleGraph({
  gradient: 'heat' // 'green' | 'heat' | 'cool' | 'mono' | 'ocean' | 'none'
});

1. green (Default)

A transition representing a typical status gauge: stable green values ascending into warnings (yellow) and errors (red).

  • Colors (Low to High): Green → Bright Green → Yellow → Orange/Red
  • Best for: Memory usage, Disk occupancy, CPU loading, Error counts.

2. heat

A hot thermal scale resembling temperature maps.

  • Colors (Low to High): Blue → Cyan → Green → Yellow → Orange → Red
  • Best for: CPU temperature logs, throughput load, networking bandwidth spikes.

3. cool

A cool, low-intensity theme containing shades of blue and white.

  • Colors (Low to High): Blue → Light Blue → Cyan → Bright Cyan → White
  • Best for: Standard heartbeat signals, background queue workers, normal operational telemetry.

4. ocean

A flowing, water-inspired transition going from deep blues to bright yellows.

  • Colors (Low to High): Blue → Light Blue → Cyan → Green → Yellow
  • Best for: Database connection counts, page hits, average request latencies.

5. mono

A clean, minimal grayscale theme.

  • Colors (Low to High): Dark Gray → Muted Gray → White → Bold White
  • Best for: High-density CLI output where colorful charts might distract from other primary output logs.

Disabling Colors

To output plain Unicode blocks without any color formatting (ANSI escape sequences or browser CSS strings), set the gradient option to 'none' or set color to false.

// Plain black and white unicode characters
const plainGraph = new ConsoleGraph({ color: false });
// Or:
const plainGraph2 = new ConsoleGraph({ gradient: 'none' });

Under the Hood: Environments

console-graph automatically detects where it is running and maps the theme palette to the correct rendering technology.

Node.js Terminals (ANSI)

In a Node.js process, color palettes map directly to 16-color ANSI escape sequences. * Bold Styles and Bright Colors are used to achieve crisp, readable boundaries. * The console output includes standard carriage resets (\x1b[0m) after every block character to prevent color bleed.

// Node.js ANSI stream representation
\x1b[34m▁\x1b[0m\x1b[36m▂\x1b[0m\x1b[32m▃\x1b[0m\x1b[31m█\x1b[0m

Browser DevTools (CSS Styling)

Modern web browsers (Chrome, Firefox, Safari, Edge) support styling console messages using CSS strings prefixed by %c syntax. * console-graph maps its gradients to a HEX color array optimized for dark/light browser dev tools. * It applies a custom font size (font-size: 14px) to the blocks to ensure they align perfectly next to normal logging strings.

// Browser representation
console.log('%c▁%c▂%c▃%c█', 'color:#3b82f6', 'color:#06b6d4', 'color:#22c55e', 'color:#ef4444');

Auto-Resolution

If your code executes in isomorphic environments (e.g. Next.js server-side vs client-side), console-graph evaluates environment properties on every print cycle, meaning it will print ANSI logs on the terminal console and CSS logs in browser DevTools automatically with no setup modifications needed on your end.