---
title: "Options"
description: "The canonical option reference — every visualizer option, its type, default, and meaning."
canonical_url: "https://www.fftvisualizer.com/guide/options"
---
# Options

> The canonical option reference — every visualizer option, its type, default, and meaning.

Every package configures the **same** set of options — the framework-agnostic
`FFTVisualizerOptions`. This page is the single source of truth for what each one **means**;
the [Core API](https://www.fftvisualizer.com/core/api), [Vue props](https://www.fftvisualizer.com/vue/props) and [React props](https://www.fftvisualizer.com/react/props) pages link
back here for descriptions.

<note>

How you pass them differs by package: **Core** takes an options object in the constructor and
`setOptions()` (`{ ledBars: true }`); **Vue** takes them as props in `camelCase` or `kebab-case`
(`:led-bars="true"`); **React** takes them as `camelCase` props (`ledBars`). The names and
meanings below are identical either way.

</note>

## Data source

<table>
<thead>
  <tr>
    <th>
      Option
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Meaning
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        mode
      </code>
    </td>
    
    <td>
      <code>
        'websocket' | 'local' | 'external'
      </code>
    </td>
    
    <td>
      <code>
        'websocket'
      </code>
    </td>
    
    <td>
      Where FFT data comes from — see <a href="https://www.fftvisualizer.com/guide/data-modes">
        Data modes
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        websocketUrl
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      WebSocket URL (used when <code>
        mode: 'websocket'
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data
      </code>
    </td>
    
    <td>
      <code>
        Uint8Array
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      External FFT magnitudes, mono (<code>
        mode: 'external'
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        dataLeft
      </code>
      
       / <code>
        dataRight
      </code>
    </td>
    
    <td>
      <code>
        Uint8Array
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      External FFT magnitudes per channel (stereo external mode)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        audioSource
      </code>
    </td>
    
    <td>
      <code>
        'mic' | 'display'
      </code>
    </td>
    
    <td>
      <code>
        'mic'
      </code>
    </td>
    
    <td>
      Local capture source (<code>
        mode: 'local'
      </code>
      
      )
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        audioDeviceId
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      —
    </td>
    
    <td>
      Specific input device for local mic capture
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        autoReconnect
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Reconnect the WebSocket with exponential backoff (1s→30s) after an unexpected drop
    </td>
  </tr>
</tbody>
</table>

## Data processing

<table>
<thead>
  <tr>
    <th>
      Option
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Meaning
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        bands
      </code>
    </td>
    
    <td>
      <code>
        10 | 20 | 40 | 80
      </code>
    </td>
    
    <td>
      <code>
        80
      </code>
    </td>
    
    <td>
      Number of frequency bands displayed
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        noiseFloor
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Cut magnitudes below this threshold (0–255)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        smoothing
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Temporal smoothing (0 = none, 0.9 = heavy)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        showPeaks
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        true
      </code>
    </td>
    
    <td>
      Show falling peak indicators
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        peakDecay
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.997
      </code>
    </td>
    
    <td>
      Peak fall speed (0.99 = slow, 0.9 = fast)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        stereo
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Stereo mode: left channel top, right channel bottom
    </td>
  </tr>
</tbody>
</table>

## Appearance

<table>
<thead>
  <tr>
    <th>
      Option
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Meaning
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        ledBars
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      LED segment effect
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ledShape
      </code>
    </td>
    
    <td>
      <code>
        'segment' | 'meter'
      </code>
    </td>
    
    <td>
      <code>
        'segment'
      </code>
    </td>
    
    <td>
      <code>
        segment
      </code>
      
       = fixed-pixel gap lines; <code>
        meter
      </code>
      
       = short, wide segments like a classic LED meter
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        lumiBars
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Full-height bars whose brightness follows the level
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radial
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Circular spectrum: angle = frequency, radius = level
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        radialInnerRadius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.35
      </code>
    </td>
    
    <td>
      Radial: inner hole radius as a fraction of outer radius (0–0.9)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        barSpace
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      Gap between bars as a fraction of bar width (0–0.9)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reflexRatio
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Mirrored reflection (0 = off). Linear mono: fraction of height (max 0.7). Radial: > 0 mirrors bars inward
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        reflexAlpha
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.25
      </code>
    </td>
    
    <td>
      Reflection brightness (0–1)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Glow above the bar tops (0 = off, 1 = max)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        rotation
      </code>
    </td>
    
    <td>
      <code>
        0 | 90 | 180 | 270
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Rotate the whole visual clockwise, in degrees
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gradient
      </code>
    </td>
    
    <td>
      <code>
        GradientName | GradientStop[]
      </code>
    </td>
    
    <td>
      <code>
        'classic'
      </code>
    </td>
    
    <td>
      Bar colors: a preset name or custom stops — see <a href="https://www.fftvisualizer.com/guide/gradients">
        Gradients
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gradientDirection
      </code>
    </td>
    
    <td>
      <code>
        'vertical' | 'horizontal'
      </code>
    </td>
    
    <td>
      <code>
        'vertical'
      </code>
    </td>
    
    <td>
      Gradient axis
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        colorMode
      </code>
    </td>
    
    <td>
      <code>
        'gradient' | 'bar-level'
      </code>
    </td>
    
    <td>
      <code>
        'gradient'
      </code>
    </td>
    
    <td>
      <code>
        bar-level
      </code>
      
       colors each whole bar by its current level
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        background
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        '#0a0a0a'
      </code>
    </td>
    
    <td>
      Background behind/between bars. Any CSS color, incl. <code>
        'transparent'
      </code>
      
       / <code>
        rgba(…)
      </code>
      
       (fixed at mount)
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        debug
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Log connection/config diagnostics to the console
    </td>
  </tr>
</tbody>
</table>

<tip>

Both wrappers add a `showStats` prop for their built-in connection/fps overlay, and React
adds `renderStats`, `className` and `style` — documented in [Vue props](https://www.fftvisualizer.com/vue/props) and
[React props](https://www.fftvisualizer.com/react/props).

</tip>


## Sitemap

See the full [sitemap](https://www.fftvisualizer.com/sitemap.md) for all pages.