# Spectrogram

Show frequency intensity over time using color.

Canonical: https://chart.syidax.com/docs/components/spectrogram/

<a id="overview"></a>

## sy-spectrogram

Inspect frequency patterns in audio, vibration, and signals.

State the time interval, frequency spacing, and linear or dB scale. The example uses frequency frames that have already been calculated.

Base chart tier: Pro. Features such as additional renderers and custom branding have separate entitlement requirements.

| Input | Data description |
| --- | --- |
| `data` | The outer array contains time frames; each inner array contains frequency-bin intensities. |
| `valueScale` | linear or db. |

- [Run in Components](https://chart.syidax.com/charts/spectrogram) — Change options and view framework-specific code
- [Shared installation and integration](https://chart.syidax.com/docs/getting-started.md)

<a id="example"></a>

## Complete implementation example

```html
<div id="chart-container" style="width: 100%; min-width: 0;"></div>

<script type="module">
  import { defineCustomElement as define0 } from '@syidax/advanced-pro/components/sy-spectrogram.js';
  define0();

  // Pro: complete registerLicense at app startup using your issued certificate.
  // The website preview certificate is not for use in customer apps.
  const specs = [
    {
      "id": "example-chart",
      "tag": "sy-spectrogram",
      "props": {
        "data": [
          [0, 0, 0.19999999999999996, 0.4, 0.6, 0.8, 1, 0.8, 0.6, 0.4, 0.19999999999999996, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0.04106453536395094, 0.2410645353639509, 0.44106453536395096, 0.6410645353639509, 0.841064535363951, 0.9589354646360491, 0.7589354646360491, 0.558935464636049, 0.3589354646360491, 0.15893546463604902, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0.08846532615307956, 0.2884653261530795, 0.4884653261530796, 0.6884653261530795, 0.8884653261530795, 0.9115346738469204, 0.7115346738469205, 0.5115346738469204, 0.31153467384692046, 0.1115346738469205, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.14828602128397184, 0.3482860212839718, 0.5482860212839717, 0.7482860212839718, 0.9482860212839718, 0.8517139787160282, 0.6517139787160282, 0.45171397871602825, 0.2517139787160282, 0.05171397871602823, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.0261151272803819, 0.22611512728038186, 0.4261151272803818, 0.6261151272803819, 0.8261151272803818, 0.9738848727196181, 0.7738848727196181, 0.5738848727196182, 0.3738848727196181, 0.17388487271961817, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.12682321215368264, 0.3268232121536826, 0.5268232121536827, 0.7268232121536826, 0.9268232121536826, 0.8731767878463174, 0.6731767878463174, 0.47317678784631734, 0.2731767878463174, 0.07317678784631743, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.05436873122621899, 0.25436873122621895, 0.454368731226219, 0.654368731226219, 0.8543687312262189, 0.945631268773781, 0.745631268773781, 0.545631268773781, 0.34563126877378103, 0.14563126877378108, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.011640216009231708, 0.21164021600923166, 0.41164021600923173, 0.6116402160092317, 0.8116402160092318, 0.9883597839907683, 0.7883597839907683, 0.5883597839907683, 0.3883597839907683, 0.18835978399076825, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.0003411175667960009, 0.20034111756679596, 0.400341117566796, 0.600341117566796, 0.800341117566796, 0.999658882433204, 0.799658882433204, 0.599658882433204, 0.399658882433204, 0.19965888243320395, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.020921895297443927, 0.22092189529744388, 0.42092189529744384, 0.6209218952974439, 0.8209218952974439, 0.9790781047025561, 0.7790781047025561, 0.5790781047025562, 0.3790781047025561, 0.17907810470255614, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.07256205853945441, 0.2725620585394545, 0.47256205853945443, 0.6725620585394545, 0.8725620585394545, 0.9274379414605456, 0.7274379414605455, 0.5274379414605456, 0.3274379414605455, 0.12743794146054555, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0, 0.15320287694432788, 0.35320287694432795, 0.5532028769443279, 0.753202876944328, 0.9532028769443279, 0.8467971230556721, 0.646797123055672, 0.4467971230556721, 0.24679712305567203, 0.046797123055672074, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.0596294555590795, 0.25962945555907946, 0.4596294555590795, 0.6596294555590795, 0.8596294555590795, 0.9403705444409205, 0.7403705444409205, 0.5403705444409205, 0.3403705444409205, 0.14037054444092045, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0, 0.18759890254282863, 0.3875989025428286, 0.5875989025428285, 0.7875989025428286, 0.9875989025428286, 0.8124010974571714, 0.6124010974571714, 0.41240109745717146, 0.2124010974571714, 0.01240109745717144, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0, 0.13200947987527623, 0.3320094798752763, 0.5320094798752762, 0.7320094798752763, 0.9320094798752763, 0.8679905201247238, 0.6679905201247237, 0.46799052012472375, 0.2679905201247237, 0.06799052012472373, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0, 0.0871039935521063, 0.28710399355210625, 0.4871039935521063, 0.6871039935521063, 0.8871039935521063, 0.9128960064478937, 0.7128960064478937, 0.5128960064478937, 0.3128960064478937, 0.11289600644789366, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0.046699314742064124, 0.2466993147420642, 0.44669931474206415, 0.6466993147420641, 0.8466993147420642, 0.9533006852579359, 0.7533006852579358, 0.5533006852579359, 0.3533006852579359, 0.15330068525793583, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.004432881621465379, 0.20443288162146533, 0.4044328816214653, 0.6044328816214654, 0.8044328816214653, 0.9955671183785346, 0.7955671183785347, 0.5955671183785347, 0.39556711837853464, 0.1955671183785347, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.15401635463588192, 0.3540163546358819, 0.554016354635882, 0.7540163546358819, 0.954016354635882, 0.8459836453641181, 0.6459836453641181, 0.44598364536411805, 0.2459836453641181, 0.04598364536411803, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.28948631275417536, 0.4894863127541754, 0.6894863127541754, 0.8894863127541754, 0.9105136872458246, 0.7105136872458246, 0.5105136872458246, 0.3105136872458246, 0.11051368724582455, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.4054419962463426, 0.6054419962463425, 0.8054419962463426, 0.9945580037536574, 0.7945580037536575, 0.5945580037536574, 0.39455800375365746, 0.1945580037536574, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.4972606179308705, 0.6972606179308706, 0.8972606179308705, 0.9027393820691294, 0.7027393820691294, 0.5027393820691295, 0.3027393820691294, 0.10273938206912947, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5612816591116129, 0.7612816591116129, 0.9612816591116129, 0.8387183408883871, 0.6387183408883871, 0.4387183408883871, 0.23871834088838706, 0.038718340888387104, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5949528029067717, 0.7949528029067716, 0.9949528029067716, 0.8050471970932284, 0.6050471970932284, 0.40504719709322834, 0.20504719709322838, 0.005047197093228428, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5969316870686725, 0.7969316870686725, 0.9969316870686724, 0.8030683129313275, 0.6030683129313276, 0.4030683129313275, 0.20306831293132754, 0.003068312931327477, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5671394197305107, 0.7671394197305108, 0.9671394197305108, 0.8328605802694893, 0.6328605802694892, 0.43286058026948926, 0.2328605802694892, 0.032860580269489126, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.5067637245761225, 0.7067637245761225, 0.9067637245761225, 0.8932362754238775, 0.6932362754238774, 0.4932362754238775, 0.29323627542387753, 0.09323627542387736, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.4182115900447897, 0.6182115900447898, 0.8182115900447897, 0.9817884099552103, 0.7817884099552103, 0.5817884099552103, 0.38178840995521024, 0.18178840995521028, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.3050133102978567, 0.5050133102978567, 0.7050133102978566, 0.9050133102978567, 0.8949866897021433, 0.6949866897021433, 0.4949866897021433, 0.29498668970214337, 0.0949866897021433, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.17168174353100518, 0.37168174353100514, 0.5716817435310052, 0.7716817435310052, 0.9716817435310052, 0.8283182564689948, 0.6283182564689949, 0.4283182564689948, 0.22831825646899484, 0.028318256468994774, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0.023532398559140688, 0.22353239855914064, 0.4235323985591407, 0.6235323985591407, 0.8235323985591407, 0.9764676014408593, 0.7764676014408594, 0.5764676014408593, 0.37646760144085933, 0.17646760144085927, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          [0, 0.0664715222539971, 0.2664715222539972, 0.46647152225399713, 0.6664715222539972, 0.8664715222539972, 0.9335284777460029, 0.7335284777460028, 0.5335284777460029, 0.3335284777460028, 0.13352847774600285, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
        ],
        "valueScale": "linear",
        "width": 640,
        "height": 360,
        "brandPosition": "bottom-right",
        "brandLogo": ""
      }
    }
  ];
  const container = document.querySelector('#chart-container');
  const elements = specs.map(({ tag, id, props }) => {
    const element = document.createElement(tag);
    element.id = id;
    Object.assign(element, props);
    element.setAttribute('aria-label', 'spectrogram example chart');
    return element;
  });
  container.replaceChildren(...elements);
  const chart = elements.at(-1);
  const onEvent = event => {
    console.log('pointClick', event.detail);
  };
  chart.addEventListener('pointClick', onEvent);
  const observer = new ResizeObserver(([entry]) => {
    const width = Math.max(160, Math.floor(entry.contentRect.width));
    elements.forEach(element => { element.width = width; });
  });
  observer.observe(container);

  // In an SPA, call this function when the view is disposed.
  function disposeChart() {
    observer.disconnect();
    chart.removeEventListener('pointClick', onEvent);
    container.replaceChildren();
  }
</script>
```

<a id="props"></a>

## Properties

<a id="property-data"></a>

### data

The outer array contains time frames; each inner array contains frequency-bin intensities.

| Item | Value |
| --- | --- |
| JavaScript property | `data` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `SpectrogramInput` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [SpectrogramInput](https://chart.syidax.com/docs/types/SpectrogramInput.md) — Type definition

<a id="property-width"></a>

### width

Chart width in pixels. If the container width changes, update width from a ResizeObserver.

| Item | Value |
| --- | --- |
| JavaScript property | `width` |
| HTML attribute | `width` |
| Type | `number` |
| Default | `640` |

<a id="property-height"></a>

### height

Chart height in pixels. Allow space for axes, titles, and the legend.

| Item | Value |
| --- | --- |
| JavaScript property | `height` |
| HTML attribute | `height` |
| Type | `number` |
| Default | `400` |

<a id="property-brandLogo"></a>

### brandLogo

The default is the Syidax symbol and wordmark. With the Pro chart.branding entitlement, set none to remove it or provide a PNG, JPEG, or WebP data URL to replace it.

| Item | Value |
| --- | --- |
| JavaScript property | `brandLogo` |
| HTML attribute | `brand-logo` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-brandPosition"></a>

### brandPosition

The corner where the logo is anchored. Community and Pro both support all four corners, using the same position on screen and in image exports.

| Item | Value |
| --- | --- |
| JavaScript property | `brandPosition` |
| HTML attribute | `brand-position` |
| Type | `'top-left' \| 'top-right' \| 'bottom-left' \| 'bottom-right'` |
| Default | `'bottom-right'` |
| Allowed values | `top-left`, `top-right`, `bottom-left`, `bottom-right` |

<a id="property-sampleRate"></a>

### sampleRate

The sampling rate in Hz: the frequency axis then spans 0 … sampleRate / 2 (unless `freq-min` / `freq-max` say otherwise).

| Item | Value |
| --- | --- |
| JavaScript property | `sampleRate` |
| HTML attribute | `sample-rate` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-freqMin"></a>

### freqMin

The frequency axis ends in Hz (default 0 … sampleRate / 2, else 0 … bins as bin indexes).

| Item | Value |
| --- | --- |
| JavaScript property | `freqMin` |
| HTML attribute | `freq-min` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-freqMax"></a>

### freqMax

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `freqMax` |
| HTML attribute | `freq-max` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-hopSeconds"></a>

### hopSeconds

Seconds per frame (the hop).

| Item | Value |
| --- | --- |
| JavaScript property | `hopSeconds` |
| HTML attribute | `hop-seconds` |
| Type | `number` |
| Default | `1` |

<a id="property-timeOrigin"></a>

### timeOrigin

Seconds at the first frame of the data (the window's drops advance it).

| Item | Value |
| --- | --- |
| JavaScript property | `timeOrigin` |
| HTML attribute | `time-origin` |
| Type | `number` |
| Default | `0` |

<a id="property-valueScale"></a>

### valueScale

linear or db.

| Item | Value |
| --- | --- |
| JavaScript property | `valueScale` |
| HTML attribute | `value-scale` |
| Type | `SpectrogramValueScale` |
| Default | `'db'` |
| Allowed values | `linear`, `db` |

- [SpectrogramValueScale](https://chart.syidax.com/docs/types/SpectrogramValueScale.md) — Type definition

<a id="property-dbFloor"></a>

### dbFloor

The dB a zero magnitude reads (the linear scale).

| Item | Value |
| --- | --- |
| JavaScript property | `dbFloor` |
| HTML attribute | `db-floor` |
| Type | `number` |
| Default | `SPECTROGRAM_DEFAULT_DB_FLOOR` |

<a id="property-samples"></a>

### samples

Raw samples (a property; ignored while `data` is set): the FFT pipeline frames them into dB.

| Item | Value |
| --- | --- |
| JavaScript property | `samples` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `ArrayLike<number>` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-fftSize"></a>

### fftSize

The FFT size, a power of two (default 1,024): bins = fft-size / 2 and each bin is sample-rate / fft-size wide.

| Item | Value |
| --- | --- |
| JavaScript property | `fftSize` |
| HTML attribute | `fft-size` |
| Type | `number` |
| Default | `1024` |

<a id="property-fftHop"></a>

### fftHop

Samples between frame starts (default fft-size / 2).

| Item | Value |
| --- | --- |
| JavaScript property | `fftHop` |
| HTML attribute | `fft-hop` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-fftWindow"></a>

### fftWindow

The analysis window: `hann` (default), `hamming`, `blackman`, `rect`.

| Item | Value |
| --- | --- |
| JavaScript property | `fftWindow` |
| HTML attribute | `fft-window` |
| Type | `SpectrogramWindowKind` |
| Default | `'hann'` |
| Allowed values | `rect`, `hann`, `hamming`, `blackman` |

- [SpectrogramWindowKind](https://chart.syidax.com/docs/types/SpectrogramWindowKind.md) — Type definition

<a id="property-colors"></a>

### colors

The colour ramp over the dB domain (a scheme name, a colour list / comma list, or `[t, colour]` stops).

| Item | Value |
| --- | --- |
| JavaScript property | `colors` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `string \| ReadonlyArray<string> \| ReadonlyArray<readonly [number, string]>` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-valueMin"></a>

### valueMin

Domain ends in dB; an omitted end follows the data (the min never more than 80 dB under the max).

| Item | Value |
| --- | --- |
| JavaScript property | `valueMin` |
| HTML attribute | `value-min` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-valueMax"></a>

### valueMax

Set as an HTML attribute or JavaScript property. type: number.

| Item | Value |
| --- | --- |
| JavaScript property | `valueMax` |
| HTML attribute | `value-max` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-emptyColor"></a>

### emptyColor

The colour of an empty cell — transparent by default.

| Item | Value |
| --- | --- |
| JavaScript property | `emptyColor` |
| HTML attribute | `empty-color` |
| Type | `string` |
| Default | `'transparent'` |

<a id="property-lod"></a>

### lod

The plane's level of detail: `auto` (area-folded once a frame or bin is under a device px — the usual case), `point`, `area`, `smooth`.

| Item | Value |
| --- | --- |
| JavaScript property | `lod` |
| HTML attribute | `lod` |
| Type | `SpectrogramLodMode` |
| Default | `'auto'` |
| Allowed values | `auto`, `point`, `area`, `smooth` |

- [SpectrogramLodMode](https://chart.syidax.com/docs/types/SpectrogramLodMode.md) — Type definition

<a id="property-areaReduce"></a>

### areaReduce

how the area LOD folds sub-pixel bins / frames: `max` (default, peak-hold — a narrow line survives) or `mean`.

| Item | Value |
| --- | --- |
| JavaScript property | `areaReduce` |
| HTML attribute | `area-reduce` |
| Type | `'mean' \| 'max'` |
| Default | `'max'` |
| Allowed values | `max`, `mean` |

<a id="property-xAxis"></a>

### xAxis

Configure the horizontal axis type, categories, range, and formatting. For a category axis, match the categories order to the value array indices. Charts supporting multiple axes can accept an axis array.

| Item | Value |
| --- | --- |
| JavaScript property | `xAxis` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianAxisInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianAxisInput](https://chart.syidax.com/docs/types/CartesianAxisInput.md) — Type definition

<a id="property-yAxis"></a>

### yAxis

Configure the vertical axis range, ticks, labels, and direction. Use consistent units for comparisons, and consider a zero baseline when comparing bar lengths.

| Item | Value |
| --- | --- |
| JavaScript property | `yAxis` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `YAxisInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [YAxisInput](https://chart.syidax.com/docs/types/YAxisInput.md) — Type definition

<a id="property-gridLines"></a>

### gridLines

Grid lines default OFF (the plane tiles the plot).

| Item | Value |
| --- | --- |
| JavaScript property | `gridLines` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianGridLinesInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianGridLinesInput](https://chart.syidax.com/docs/types/CartesianGridLinesInput.md) — Type definition

<a id="property-crosshair"></a>

### crosshair

Crosshair that follows the cursor across the plot.

| Item | Value |
| --- | --- |
| JavaScript property | `crosshair` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianCrosshairInput` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianCrosshairInput](https://chart.syidax.com/docs/types/CartesianCrosshairInput.md) — Type definition

<a id="property-zoom"></a>

### zoom

Zoom (2026-09-10) — the shared cartesian zoom on the time (s) / frequency (Hz) axes: a mode (`'x'` | `'y'` | `'xy'`), `true`, `'inside'` or the object (drag rectangle, pan, wheel, pinch, keyboard, reset button). Off by default.

| Item | Value |
| --- | --- |
| JavaScript property | `zoom` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianZoomInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off`, `true`, `false`, `x`, `y`, `xy`, `inside` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianZoomInput](https://chart.syidax.com/docs/types/CartesianZoomInput.md) — Type definition

<a id="property-chartTitle"></a>

### chartTitle

The title inside the chart. Explain the data's unit and meaning alongside it.

| Item | Value |
| --- | --- |
| JavaScript property | `chartTitle` |
| HTML attribute | `chart-title` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-chartSubtitle"></a>

### chartSubtitle

The subtitle inside the chart.

| Item | Value |
| --- | --- |
| JavaScript property | `chartSubtitle` |
| HTML attribute | `chart-subtitle` |
| Type | `string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-enableMouseTracking"></a>

### enableMouseTracking

Set as an HTML attribute or JavaScript property. type: boolean.

| Item | Value |
| --- | --- |
| JavaScript property | `enableMouseTracking` |
| HTML attribute | `enable-mouse-tracking` |
| Type | `boolean` |
| Default | `true` |

<a id="property-tooltip"></a>

### tooltip

the cell tooltip (the shared cartesian tooltip input: show / trigger / format / html / connector / draggable …).

| Item | Value |
| --- | --- |
| JavaScript property | `tooltip` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `CartesianTooltipInput` |
| Default | `undefined` |
| Literals in the type | `auto`, `off` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [CartesianTooltipInput](https://chart.syidax.com/docs/types/CartesianTooltipInput.md) — Type definition

<a id="property-tooltipEnabled"></a>

### tooltipEnabled

Set as an HTML attribute or JavaScript property. type: boolean.

| Item | Value |
| --- | --- |
| JavaScript property | `tooltipEnabled` |
| HTML attribute | `tooltip-show` |
| Type | `boolean` |
| Default | `true` |

<a id="property-tooltipFormat"></a>

### tooltipFormat

a plain-text formatter of the default tooltip (`tooltip.format` wins).

| Item | Value |
| --- | --- |
| JavaScript property | `tooltipFormat` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `(detail: SpectrogramPointEventDetail) => string` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [SpectrogramPointEventDetail](https://chart.syidax.com/docs/types/SpectrogramPointEventDetail.md) — Type definition

<a id="property-animated"></a>

### animated

Whether to animate initial display and data changes.

| Item | Value |
| --- | --- |
| JavaScript property | `animated` |
| HTML attribute | `animate` |
| Type | `boolean` |
| Default | `false` |

<a id="property-animationDuration"></a>

### animationDuration

Animation duration in milliseconds.

| Item | Value |
| --- | --- |
| JavaScript property | `animationDuration` |
| HTML attribute | `animation-duration` |
| Type | `number` |
| Default | `600` |

<a id="property-animationEasing"></a>

### animationEasing

Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.

| Item | Value |
| --- | --- |
| JavaScript property | `animationEasing` |
| HTML attribute | `animation-easing` |
| Type | `SpectrogramEasing` |
| Default | `'ease-out'` |
| Allowed values | `linear`, `ease-out`, `ease-in`, `ease-in-out` |

- [SpectrogramEasing](https://chart.syidax.com/docs/types/SpectrogramEasing.md) — Type definition

<a id="property-animationType"></a>

### animationType

Allowed values: initial, update. Default: undefined.

| Item | Value |
| --- | --- |
| JavaScript property | `animationType` |
| HTML attribute | `animation-type` |
| Type | `SpectrogramAnimationType` |
| Default | `undefined` |
| Allowed values | `initial`, `update` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [SpectrogramAnimationType](https://chart.syidax.com/docs/types/SpectrogramAnimationType.md) — Type definition

<a id="property-streamSource"></a>

### streamSource

A stream source for live data. Check the contract for the specific type.

| Item | Value |
| --- | --- |
| JavaScript property | `streamSource` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `SpectrogramStreamSource` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [SpectrogramStreamSource](https://chart.syidax.com/docs/types/SpectrogramStreamSource.md) — Type definition

<a id="property-streamMax"></a>

### streamMax

The scrolling window: frames kept at most (default 4,096) — the oldest scroll out first and the time origin advances.

| Item | Value |
| --- | --- |
| JavaScript property | `streamMax` |
| HTML attribute | `stream-max` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-streamWindow"></a>

### streamWindow

The newest N streamed frames the chart renders (the whole buffer when unset); the frames before the window stay buffered, the time axis starts at the window.

| Item | Value |
| --- | --- |
| JavaScript property | `streamWindow` |
| HTML attribute | `stream-window` |
| Type | `number` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

<a id="property-visualMap"></a>

### visualMap

A visual-map binding (a `sy-visual-map` snapshot + dimension); it overrides `colors` / `value-min` / `value-max` while bound.

| Item | Value |
| --- | --- |
| JavaScript property | `visualMap` |
| HTML attribute | Pass objects, arrays, and callbacks as JavaScript properties |
| Type | `VisualMapBinding \| null` |
| Default | `undefined` |

undefined means this property was not explicitly set. The effective value may depend on the chart type and other settings.

- [VisualMapBinding](https://chart.syidax.com/docs/types/VisualMapBinding.md) — Type definition

<a id="property-engine"></a>

### engine

`auto`, `standard` and `pro` all run the one WebGPU renderer (a Pro-only type has no other); switching never tears it down.

| Item | Value |
| --- | --- |
| JavaScript property | `engine` |
| HTML attribute | `engine` |
| Type | `SpectrogramEngineMode` |
| Default | `'auto'` |
| Allowed values | `auto`, `standard`, `pro` |

- [SpectrogramEngineMode](https://chart.syidax.com/docs/types/SpectrogramEngineMode.md) — Type definition

<a id="property-unavailable"></a>

### unavailable

`fallback` shows the on-chart notice when the renderer cannot run; `error` throws.

| Item | Value |
| --- | --- |
| JavaScript property | `unavailable` |
| HTML attribute | `unavailable` |
| Type | `SpectrogramUnavailableBehaviour` |
| Default | `'fallback'` |
| Allowed values | `fallback`, `error` |

- [SpectrogramUnavailableBehaviour](https://chart.syidax.com/docs/types/SpectrogramUnavailableBehaviour.md) — Type definition

<a id="events"></a>

## Events

<a id="event-rendered"></a>

### rendered

Every drawn frame; `engine` is the engine status (requested / effective / code / the governing license feature).

Event name: `rendered`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<SpectrogramRenderResult & { tier: SpectrogramEngineTier; engine?: ChartEngineStatus }>`.

```javascript
chart.addEventListener('rendered', event => {
  console.log(event.detail); // SpectrogramRenderResult & { tier: SpectrogramEngineTier; engine?: ChartEngineStatus }
});
```

- [SpectrogramRenderResult](https://chart.syidax.com/docs/types/SpectrogramRenderResult.md) — Type definition
- [SpectrogramEngineTier](https://chart.syidax.com/docs/types/SpectrogramEngineTier.md) — Type definition
- [ChartEngineStatus](https://chart.syidax.com/docs/types/ChartEngineStatus.md) — Type definition

<a id="event-pointClick"></a>

### pointClick

A point selection event. Read the selected data and index from CustomEvent.detail.

Event name: `pointClick`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<SpectrogramPointEventDetail>`.

```javascript
chart.addEventListener('pointClick', event => {
  console.log(event.detail); // SpectrogramPointEventDetail
});
```

- [SpectrogramPointEventDetail](https://chart.syidax.com/docs/types/SpectrogramPointEventDetail.md) — Type definition

<a id="event-pointHover"></a>

### pointHover

CustomEvent.detail type: SpectrogramPointEventDetail | null. Event names are case-sensitive.

Event name: `pointHover`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<SpectrogramPointEventDetail | null>`.

```javascript
chart.addEventListener('pointHover', event => {
  console.log(event.detail); // SpectrogramPointEventDetail | null
});
```

- [SpectrogramPointEventDetail](https://chart.syidax.com/docs/types/SpectrogramPointEventDetail.md) — Type definition

<a id="event-crosshairMove"></a>

### crosshairMove

CustomEvent.detail type: CartesianCrosshairEventDetail | null. Event names are case-sensitive.

Event name: `crosshairMove`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianCrosshairEventDetail | null>`.

```javascript
chart.addEventListener('crosshairMove', event => {
  console.log(event.detail); // CartesianCrosshairEventDetail | null
});
```

- [CartesianCrosshairEventDetail](https://chart.syidax.com/docs/types/CartesianCrosshairEventDetail.md) — Type definition

<a id="event-pointContextMenu"></a>

### pointContextMenu

CustomEvent.detail type: ChartPointContextMenuEventDetail<SpectrogramPointEventDetail>. Event names are case-sensitive.

Event name: `pointContextMenu`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<ChartPointContextMenuEventDetail<SpectrogramPointEventDetail>>`.

```javascript
chart.addEventListener('pointContextMenu', event => {
  console.log(event.detail); // ChartPointContextMenuEventDetail<SpectrogramPointEventDetail>
});
```

- [ChartPointContextMenuEventDetail](https://chart.syidax.com/docs/types/ChartPointContextMenuEventDetail.md) — Type definition
- [SpectrogramPointEventDetail](https://chart.syidax.com/docs/types/SpectrogramPointEventDetail.md) — Type definition

<a id="event-appended"></a>

### appended

CustomEvent.detail type: { count: number }. Event names are case-sensitive.

Event name: `appended`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ count: number }>`.

```javascript
chart.addEventListener('appended', event => {
  console.log(event.detail); // { count: number }
});
```

<a id="event-windowSlid"></a>

### windowSlid

CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.

Event name: `windowSlid`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<{ dropped: number }>`.

```javascript
chart.addEventListener('windowSlid', event => {
  console.log(event.detail); // { dropped: number }
});
```

<a id="event-chartAnimationStart"></a>

### chartAnimationStart

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationStart`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationStart', event => {
  console.log(event.detail); // void
});
```

<a id="event-chartAnimationEnd"></a>

### chartAnimationEnd

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationEnd`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationEnd', event => {
  console.log(event.detail); // void
});
```

<a id="event-chartAnimationInterrupted"></a>

### chartAnimationInterrupted

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `chartAnimationInterrupted`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('chartAnimationInterrupted', event => {
  console.log(event.detail); // void
});
```

<a id="event-tooltipShow"></a>

### tooltipShow

Whether to display the built-in tooltip.

Event name: `tooltipShow`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianTooltipEventDetail>`.

```javascript
chart.addEventListener('tooltipShow', event => {
  console.log(event.detail); // CartesianTooltipEventDetail
});
```

- [CartesianTooltipEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipEventDetail.md) — Type definition

<a id="event-tooltipHide"></a>

### tooltipHide

CustomEvent.detail type: void. Event names are case-sensitive.

Event name: `tooltipHide`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<void>`.

```javascript
chart.addEventListener('tooltipHide', event => {
  console.log(event.detail); // void
});
```

<a id="event-tooltipAction"></a>

### tooltipAction

CustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.

Event name: `tooltipAction`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianTooltipActionEventDetail>`.

```javascript
chart.addEventListener('tooltipAction', event => {
  console.log(event.detail); // CartesianTooltipActionEventDetail
});
```

- [CartesianTooltipActionEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipActionEventDetail.md) — Type definition

<a id="event-zoomChange"></a>

### zoomChange

Zoom — every zoom / pan change (drag, keyboard, wheel, pinch, API, reset); `null` zoom = the full extent.

Event name: `zoomChange`. Names are case-sensitive. Read the payload from `detail` on `CustomEvent<CartesianZoomChangeEventDetail>`.

```javascript
chart.addEventListener('zoomChange', event => {
  console.log(event.detail); // CartesianZoomChangeEventDetail
});
```

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="methods"></a>

## Methods

<a id="method-getDataTable"></a>

### getDataTable

Current normalized table, including the retained stream; independent of GPU availability.

```typescript
getDataTable(): Promise<ChartDataTable>
```

Return type: `Promise<ChartDataTable>`. Call the method after element registration and await its Promise result.

- [ChartDataTable](https://chart.syidax.com/docs/types/ChartDataTable.md) — Type definition

<a id="method-redraw"></a>

### redraw

Redraw the chart using its current data and options. Inspect the rendered result after the returned Promise resolves.

```typescript
redraw(): Promise<SpectrogramRenderResult>
```

Return type: `Promise<SpectrogramRenderResult>`. Call the method after element registration and await its Promise result.

- [SpectrogramRenderResult](https://chart.syidax.com/docs/types/SpectrogramRenderResult.md) — Type definition

<a id="method-getActiveTier"></a>

### getActiveTier

An asynchronous method. Check the argument and return types below.

```typescript
getActiveTier(): Promise<SpectrogramEngineTier>
```

Return type: `Promise<SpectrogramEngineTier>`. Call the method after element registration and await its Promise result.

- [SpectrogramEngineTier](https://chart.syidax.com/docs/types/SpectrogramEngineTier.md) — Type definition

<a id="method-getUnavailableReason"></a>

### getUnavailableReason

The reason the renderer cannot run (`undefined` while it runs).

```typescript
getUnavailableReason(): Promise<string | undefined>
```

Return type: `Promise<string | undefined>`. Call the method after element registration and await its Promise result.

<a id="method-setData"></a>

### setData

Replace the bar set.

```typescript
setData(data: SpectrogramInput): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `data` | `SpectrogramInput` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [SpectrogramInput](https://chart.syidax.com/docs/types/SpectrogramInput.md) — Type definition

<a id="method-appendFrame"></a>

### appendFrame

An asynchronous method. Check the argument and return types below.

```typescript
appendFrame(frame: SpectrogramFrame): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `frame` | `SpectrogramFrame` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [SpectrogramFrame](https://chart.syidax.com/docs/types/SpectrogramFrame.md) — Type definition

<a id="method-appendBatch"></a>

### appendBatch

Append multiple values to the stream. Check the argument type and the licensing requirements for streaming.

```typescript
appendBatch(frames: ReadonlyArray<SpectrogramFrame>): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `frames` | `ReadonlyArray<SpectrogramFrame>` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [SpectrogramFrame](https://chart.syidax.com/docs/types/SpectrogramFrame.md) — Type definition

<a id="method-shift"></a>

### shift

Drop the `count` oldest frames — the data frames too (they fold into the internal source on the first shift as on the first append). (carry-over C8) — `shift(n)` drops the n oldest frames on screen. With an internal source the recording is folded into it (it shifts them itself); under an EXTERNAL source the recording's leading frames go first (before the source lost its frames while the recording's old frames came back into the window), then the source.

```typescript
shift(count: number): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `count` | `number` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-replace"></a>

### replace

Swap the streamed set (`replace([])` clears it); the base `values` never leave. Without `chart.streaming` the dies upsert into the base like a batch (quietly: no `appended`, no `binChanged`, as a ring replace).

```typescript
replace(frames: ReadonlyArray<SpectrogramFrame>): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `frames` | `ReadonlyArray<SpectrogramFrame>` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [SpectrogramFrame](https://chart.syidax.com/docs/types/SpectrogramFrame.md) — Type definition

<a id="method-getStreamSource"></a>

### getStreamSource

The stream session's source (Chart Pro): like the stream methods it waits for a license still being confirmed.

```typescript
getStreamSource(): Promise<SpectrogramStreamSource | undefined>
```

Return type: `Promise<SpectrogramStreamSource | undefined>`. Call the method after element registration and await its Promise result.

- [SpectrogramStreamSource](https://chart.syidax.com/docs/types/SpectrogramStreamSource.md) — Type definition

<a id="method-setAnimation"></a>

### setAnimation

An asynchronous method. Check the argument and return types below.

```typescript
setAnimation(options: { duration?: number; easing?: SpectrogramEasing; enabled?: boolean; type?: SpectrogramAnimationType }): Promise<void>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `options` | `{ duration?: number; easing?: SpectrogramEasing; enabled?: boolean; type?: SpectrogramAnimationType }` | Required |

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

- [SpectrogramEasing](https://chart.syidax.com/docs/types/SpectrogramEasing.md) — Type definition
- [SpectrogramAnimationType](https://chart.syidax.com/docs/types/SpectrogramAnimationType.md) — Type definition

<a id="method-pauseAnimation"></a>

### pauseAnimation

Pause the current animation.

```typescript
pauseAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-resumeAnimation"></a>

### resumeAnimation

Resume a paused animation.

```typescript
resumeAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-replayAnimation"></a>

### replayAnimation

Replay the initial sweep from min → value(s). No-op when animation is off / reduced.

```typescript
replayAnimation(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-hitTest"></a>

### hitTest

The cell under host-relative CSS coordinates, or null.

```typescript
hitTest(cssX: number, cssY: number): Promise<SpectrogramPointEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `cssX` | `number` | Required |
| `cssY` | `number` | Required |

Return type: `Promise<SpectrogramPointEventDetail | null>`. Call the method after element registration and await its Promise result.

- [SpectrogramPointEventDetail](https://chart.syidax.com/docs/types/SpectrogramPointEventDetail.md) — Type definition

<a id="method-showTooltipAtCell"></a>

### showTooltipAtCell

open the tooltip on a cell (frame / bin), honouring the tooltip input; null when the tooltip is off or the cell is outside.

```typescript
showTooltipAtCell(frame: number, bin: number): Promise<CartesianTooltipEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `frame` | `number` | Required |
| `bin` | `number` | Required |

Return type: `Promise<CartesianTooltipEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianTooltipEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipEventDetail.md) — Type definition

<a id="method-showTooltipAtIndex"></a>

### showTooltipAtIndex

open the tooltip on a cell by its index (`frame * bins + bin`; the facade's showTooltipAtPoint).

```typescript
showTooltipAtIndex(index: number): Promise<CartesianTooltipEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `index` | `number` | Required |

Return type: `Promise<CartesianTooltipEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianTooltipEventDetail](https://chart.syidax.com/docs/types/CartesianTooltipEventDetail.md) — Type definition

<a id="method-hideTooltip"></a>

### hideTooltip

Close the currently visible tooltip.

```typescript
hideTooltip(): Promise<void>
```

Return type: `Promise<void>`. Call the method after element registration and await its Promise result.

<a id="method-focusCellAt"></a>

### focusCellAt

move the keyboard focus ring to a cell and announce it (null outside the grid).

```typescript
focusCellAt(frame: number, bin: number): Promise<SpectrogramPointEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `frame` | `number` | Required |
| `bin` | `number` | Required |

Return type: `Promise<SpectrogramPointEventDetail | null>`. Call the method after element registration and await its Promise result.

- [SpectrogramPointEventDetail](https://chart.syidax.com/docs/types/SpectrogramPointEventDetail.md) — Type definition

<a id="method-getValue"></a>

### getValue

The dB value of a cell (`null` when empty or outside the grid).

```typescript
getValue(frame: number, bin: number): Promise<number | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `frame` | `number` | Required |
| `bin` | `number` | Required |

Return type: `Promise<number | null>`. Call the method after element registration and await its Promise result.

<a id="method-getValueExtent"></a>

### getValueExtent

The dB extent of the plane (min / max over the finite cells).

```typescript
getValueExtent(): Promise<SpectrogramValueExtent | null>
```

Return type: `Promise<SpectrogramValueExtent | null>`. Call the method after element registration and await its Promise result.

- [SpectrogramValueExtent](https://chart.syidax.com/docs/types/SpectrogramValueExtent.md) — Type definition

<a id="method-getGridSize"></a>

### getGridSize

Columns × rows of the current grid.

```typescript
getGridSize(): Promise<{ frames: number; bins: number; cells: number; dropped: number }>
```

Return type: `Promise<{ frames: number; bins: number; cells: number; dropped: number }>`. Call the method after element registration and await its Promise result.

<a id="method-getRanges"></a>

### getRanges

The time and frequency ranges the plane spans.

```typescript
getRanges(): Promise<SpectrogramRanges>
```

Return type: `Promise<SpectrogramRanges>`. Call the method after element registration and await its Promise result.

- [SpectrogramRanges](https://chart.syidax.com/docs/types/SpectrogramRanges.md) — Type definition

<a id="method-appendSamples"></a>

### appendSamples

feed raw samples: every completed window becomes a frame (appended through the stream); the rest waits.

```typescript
appendSamples(samples: ArrayLike<number>): Promise<SpectrogramAppendSamplesResult>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `samples` | `ArrayLike<number>` | Required |

Return type: `Promise<SpectrogramAppendSamplesResult>`. Call the method after element registration and await its Promise result.

- [SpectrogramAppendSamplesResult](https://chart.syidax.com/docs/types/SpectrogramAppendSamplesResult.md) — Type definition

<a id="method-getFftInfo"></a>

### getFftInfo

the FFT pipeline's resolved parameters (bins, bin width, frame seconds, the window's coherent gain).

```typescript
getFftInfo(): Promise<SpectrogramFftInfo>
```

Return type: `Promise<SpectrogramFftInfo>`. Call the method after element registration and await its Promise result.

- [SpectrogramFftInfo](https://chart.syidax.com/docs/types/SpectrogramFftInfo.md) — Type definition

<a id="method-setVisualMap"></a>

### setVisualMap

Bind (or clear with null) a visual-map snapshot; it wins over the `visualMap` prop until the prop changes again.

```typescript
setVisualMap(binding: VisualMapBinding | null): Promise<VisualMapBinding | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `binding` | `VisualMapBinding \| null` | Required |

Return type: `Promise<VisualMapBinding | null>`. Call the method after element registration and await its Promise result.

- [VisualMapBinding](https://chart.syidax.com/docs/types/VisualMapBinding.md) — Type definition

<a id="method-getVisualMap"></a>

### getVisualMap

An asynchronous method. Check the argument and return types below.

```typescript
getVisualMap(): Promise<VisualMapBinding | null>
```

Return type: `Promise<VisualMapBinding | null>`. Call the method after element registration and await its Promise result.

- [VisualMapBinding](https://chart.syidax.com/docs/types/VisualMapBinding.md) — Type definition

<a id="method-getVisualExtent"></a>

### getVisualExtent

The extent of a dimension: `value` = dB, `x` = time (s), `y` = frequency (Hz), `index` = the cell indexes.

```typescript
getVisualExtent(request?: VisualMapExtentRequest): Promise<VisualMapExtent | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `VisualMapExtentRequest` | Optional |

Return type: `Promise<VisualMapExtent | null>`. Call the method after element registration and await its Promise result.

- [VisualMapExtent](https://chart.syidax.com/docs/types/VisualMapExtent.md) — Type definition
- [VisualMapExtentRequest](https://chart.syidax.com/docs/types/VisualMapExtentRequest.md) — Type definition

<a id="method-zoomTo"></a>

### zoomTo

Zoom to explicit windows in axis units: `x` (seconds) / `y` (Hz) as `{ min, max }` or `[min, max]` (`null` clears that orientation).

```typescript
zoomTo(request: CartesianZoomRequest): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `CartesianZoomRequest` | Required |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition
- [CartesianZoomRequest](https://chart.syidax.com/docs/types/CartesianZoomRequest.md) — Type definition

<a id="method-zoomBy"></a>

### zoomBy

Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre).

```typescript
zoomBy(factor: number, anchorFraction?: number): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `factor` | `number` | Required |
| `anchorFraction` | `number` | Optional |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-panBy"></a>

### panBy

Slide the zoomed windows by axis units (`{ x?: seconds, y?: Hz }`); a no-op at the full extent.

```typescript
panBy(delta: { x?: number; y?: number }): Promise<CartesianZoomChangeEventDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `delta` | `{ x?: number; y?: number }` | Required |

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-resetZoom"></a>

### resetZoom

Reset the zoomed or panned range to the original data range.

```typescript
resetZoom(): Promise<CartesianZoomChangeEventDetail | null>
```

Return type: `Promise<CartesianZoomChangeEventDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomChangeEventDetail](https://chart.syidax.com/docs/types/CartesianZoomChangeEventDetail.md) — Type definition

<a id="method-getZoom"></a>

### getZoom

Read the current zoom range. Check the return type's nullability and the range for each axis.

```typescript
getZoom(): Promise<CartesianZoomState | null>
```

Return type: `Promise<CartesianZoomState | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomState](https://chart.syidax.com/docs/types/CartesianZoomState.md) — Type definition

<a id="method-getZoomExtent"></a>

### getZoomExtent

The full extent (and key) of the primary — or the named — axes: the time span in seconds, the frequency span in Hz.

```typescript
getZoomExtent(request?: CartesianZoomExtentRequest): Promise<CartesianZoomExtentDetail | null>
```

| Arguments | Type | Required |
| --- | --- | --- |
| `request` | `CartesianZoomExtentRequest` | Optional |

Return type: `Promise<CartesianZoomExtentDetail | null>`. Call the method after element registration and await its Promise result.

- [CartesianZoomExtentDetail](https://chart.syidax.com/docs/types/CartesianZoomExtentDetail.md) — Type definition
- [CartesianZoomExtentRequest](https://chart.syidax.com/docs/types/CartesianZoomExtentRequest.md) — Type definition

<a id="method-getEngineStatus"></a>

### getEngineStatus

Requested engine vs what runs, and why (CHART-ADD-08): the decision for the current inputs, read without side effects (ProChartLicense.engineStatus); a renderer that failed at run time reports engine-unsupported.

```typescript
getEngineStatus(): Promise<ChartEngineStatus>
```

Return type: `Promise<ChartEngineStatus>`. Call the method after element registration and await its Promise result.

- [ChartEngineStatus](https://chart.syidax.com/docs/types/ChartEngineStatus.md) — Type definition