syidaxchart
Home Pricing Settings
ChartsDistribution

Spectrogram.

PRO

Show frequency intensity over time using color.

<sy-spectrogram>Installation and integration API reference
Live preview21 feature examples

LIVE EXAMPLE

Time and frequency

Match the page theme
Interact with the chart to see selection and range-change results here.
OptionsChanges are reflected in the preview and code.
Appearance and style4
Axes and grid lines11
Legend and interaction13
Title and dimensions3

Show the intensity of frequency bins in each frame using color. All values are sample data.

View code
Current preview
<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>

Usage and data

#

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.

Data contract

PropertyInput format
dataThe outer array contains time frames; each inner array contains frequency-bin intensities.
valueScalelinear or db.

Updating data

Assign a new array or object to the property instead of mutating values inside an array. Chart events provide selection results through event.detail. When disposing of the view, clean up ResizeObserver and event listeners registered by your app.

Feature examples

#

Try 21 interactive feature examples and inspect their code. Select “Edit in preview” to combine more options in the settings panel above.

Decibel inputPRO

Pass amplitudes converted to −60–0 dB to compare weak and strong components.

Interact with the chart to see results here.
View code

Maximum aggregationPRO

Preserve narrow signal peaks when summarizing 1,024 dense frames for the screen.

Interact with the chart to see results here.
View code

Inspect values with the pointerPRO

Point to data to view the value at that location.

Interact with the chart to see results here.
View code

Crosshair trackingPRO

Move the pointer to read horizontal and vertical coordinates alongside values.

Interact with the chart to see results here.
View code

Drag to zoom and panPRO

Drag to zoom and hold Shift to pan. Use Ctrl + wheel to zoom in or out.

Interact with the chart to see results here.
View code

Replay animationPRO

Redraw the same example to inspect its initial display animation.

Interact with the chart to see results here.
View code

AnimationPRO

Compare 1 examples of Animation. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

AxisPRO

Compare 5 examples of Axis. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

ColorPRO

Compare 4 examples of Color. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

CrosshairPRO

Compare 5 examples of Crosshair. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

Data inputPRO

Compare 1 examples of Data input. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

FFTPRO

Compare 4 examples of FFT. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

Large datasetsPRO

Compare 1 examples of Large datasets. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

SizePRO

Compare 1 examples of Size. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

TooltipPRO

Compare 13 examples of Tooltip. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

Zoom and panPRO

Compare 6 examples of Zoom and pan. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

Context menuPRO

Compare 1 examples of Context menu. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

Data context menuPRO

Compare 1 examples of Data context menu. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

Read coordinates and dataPRO

Compare 1 examples of Read coordinates and data. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

OverviewPRO

Compare 4 examples of Overview. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

Streaming · Add and update live dataPRO

Compare 5 examples of Add and update live data. Buttons and options update both the live result and source code.

Interact with the chart to see results here.
View code

API reference

#

The full public API for sy-spectrogram. Pass objects and arrays as JavaScript properties. Select a name to view usage code and type definitions.

Key properties

Attribute / PropertyType / DefaultDescription
SpectrogramInputDefault: undefinedThe outer array contains time frames; each inner array contains frequency-bin intensities.
numberDefault: 640Chart width in pixels. Update with ResizeObserver when the container changes.
numberDefault: 400Chart height in pixels.
brandLogostringDefault: undefinedThe default is the Syidax logo. With the Pro chart.branding entitlement, use none or a PNG, JPEG, or WebP data URL.
brandPosition'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'Default: 'bottom-right'The corner where the logo is anchored. Applies equally to Community and Pro, on screen and in image exports.
valueScaleSpectrogramValueScaleDefault: 'db'linear or db.
dbFloornumberDefault: SPECTROGRAM_DEFAULT_DB_FLOORThe dB a zero magnitude reads (the linear scale).
SpectrogramLodModeDefault: 'auto'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`.
areaReduce'mean' | 'max'Default: 'max'Allowed values: max, mean. Default: 'max'.
xAxisCartesianAxisInputDefault: undefinedAllowed values: auto, off. Default: undefined.
yAxisYAxisInputDefault: undefinedOne y axis, or a slot array `[left, right, …]` — a later slot may carry its own `min` / `max` (Hz left, kHz right), a `position`, a `linkedTo` or a numeric `kind` (`linear` / `log` / `time`); every visible slot renders in the overlay.
gridLinesCartesianGridLinesInputDefault: undefinedGrid lines default OFF (the plane tiles the plot).
CartesianCrosshairInputDefault: undefinedCrosshair that follows the cursor across the plot.
CartesianZoomInputDefault: undefinedSettings for zooming and the visible range.
chartTitlestringDefault: undefinedThe title inside the chart. Explain the data's unit and meaning alongside it.
chartSubtitlestringDefault: undefinedThe subtitle inside the chart.
CartesianTooltipInputDefault: undefinedTooltip settings for pointer-driven values, position, and content.
tooltipEnabledbooleanDefault: trueSet as an HTML attribute or JavaScript property. type: boolean.
animatedbooleanDefault: falseWhether to animate initial display and data changes.
animationDurationnumberDefault: 600Animation duration in milliseconds.
animationEasingSpectrogramEasingDefault: 'ease-out'Allowed values: linear, ease-out, ease-in, ease-in-out. Default: 'ease-out'.
animationTypeSpectrogramAnimationTypeDefault: undefinedAllowed values: initial, update. Default: undefined.
Other properties 21
Attribute / PropertyType / DefaultDescription
sampleRatenumberDefault: undefinedThe sampling rate in Hz: the frequency axis then spans 0 … sampleRate / 2 (unless `freq-min` / `freq-max` say otherwise).
freqMinnumberDefault: undefinedThe frequency axis ends in Hz (default 0 … sampleRate / 2, else 0 … bins as bin indexes).
freqMaxnumberDefault: undefinedSet as an HTML attribute or JavaScript property. type: number.
hopSecondsnumberDefault: 1Seconds per frame (the hop).
timeOriginnumberDefault: 0Seconds at the first frame of the data (the window's drops advance it).
ArrayLike<number>Default: undefinedRaw samples (a property; ignored while `data` is set): the FFT pipeline frames them into dB.
fftSizenumberDefault: 1024The FFT size, a power of two (default 1,024): bins = fft-size / 2 and each bin is sample-rate / fft-size wide.
fftHopnumberDefault: undefinedSamples between frame starts (default fft-size / 2).
fftWindowSpectrogramWindowKindDefault: 'hann'The analysis window: `hann` (default), `hamming`, `blackman`, `rect`.
string | ReadonlyArray<string> | ReadonlyArray<readonly [number, string]>Default: undefinedThe colour ramp over the dB domain (a scheme name, a colour list / comma list, or `[t, colour]` stops).
valueMinnumberDefault: undefinedDomain ends in dB; an omitted end follows the data (the min never more than 80 dB under the max).
valueMaxnumberDefault: undefinedSet as an HTML attribute or JavaScript property. type: number.
emptyColorstringDefault: 'transparent'The colour of an empty cell — transparent by default.
enableMouseTrackingbooleanDefault: trueSet as an HTML attribute or JavaScript property. type: boolean.
tooltipFormat(detail: SpectrogramPointEventDetail) => stringDefault: undefinedPass as a JavaScript property. type: (detail: SpectrogramPointEventDetail) => string.
streamSourceSpectrogramStreamSourceDefault: undefinedA stream source for live data. Check the contract for the specific type.
streamMaxnumberDefault: undefinedThe maximum number of streaming data points to retain.
streamWindownumberDefault: undefinedThe streaming data range to keep visible.
visualMapVisualMapBinding | nullDefault: undefinedA visual-map binding (a `sy-visual-map` snapshot + dimension); it overrides `colors` / `value-min` / `value-max` while bound.
SpectrogramEngineModeDefault: 'auto'Renderer selection: auto, standard, or pro. Engine selection is separate from permission to use a Pro chart type.
SpectrogramUnavailableBehaviourDefault: 'fallback'`fallback` shows the on-chart notice when the renderer cannot run; `error` throws.
Events 14
EventsDetail typeDescription
SpectrogramRenderResult & { tier: SpectrogramEngineTier; engine?: ChartEngineStatus }Emits rendering results in detail when chart drawing completes.
SpectrogramPointEventDetailA point selection event. Read the selected data and index from CustomEvent.detail.
SpectrogramPointEventDetail | nullCustomEvent.detail type: SpectrogramPointEventDetail | null. Event names are case-sensitive.
CartesianCrosshairEventDetail | nullCustomEvent.detail type: CartesianCrosshairEventDetail | null. Event names are case-sensitive.
ChartPointContextMenuEventDetail<SpectrogramPointEventDetail>CustomEvent.detail type: ChartPointContextMenuEventDetail<SpectrogramPointEventDetail>. Event names are case-sensitive.
{ count: number }CustomEvent.detail type: { count: number }. Event names are case-sensitive.
{ dropped: number }CustomEvent.detail type: { dropped: number }. Event names are case-sensitive.
voidCustomEvent.detail type: void. Event names are case-sensitive.
voidCustomEvent.detail type: void. Event names are case-sensitive.
voidCustomEvent.detail type: void. Event names are case-sensitive.
CartesianTooltipEventDetailWhether to display the built-in tooltip.
voidCustomEvent.detail type: void. Event names are case-sensitive.
CartesianTooltipActionEventDetailCustomEvent.detail type: CartesianTooltipActionEventDetail. Event names are case-sensitive.
CartesianZoomChangeEventDetailZoom — every zoom / pan change (drag, keyboard, wheel, pinch, API, reset); `null` zoom = the full extent.
Methods 35

Stencil methods return Promises. Use await within an async function to read the result.

Method / ArgumentsReturn typeDescription
Promise<ChartDataTable>Current normalized table, including the retained stream; independent of GPU availability.
Promise<SpectrogramRenderResult>Draws a frame now; rejects with the SyidaxLicenseError while the type is not entitled or the chart is frozen.
Promise<SpectrogramEngineTier>An asynchronous method. Check the argument and return types below.
Promise<string | undefined>The reason the renderer cannot run (`undefined` while it runs).
data: SpectrogramInputPromise<void>An asynchronous method. Check the argument and return types below.
frame: SpectrogramFramePromise<void>An asynchronous method. Check the argument and return types below.
frames: ReadonlyArray<SpectrogramFrame>Promise<void>An asynchronous method. Check the argument and return types below.
count: numberPromise<void>An asynchronous method. Check the argument and return types below.
frames: ReadonlyArray<SpectrogramFrame>Promise<void>An asynchronous method. Check the argument and return types below.
Promise<SpectrogramStreamSource | undefined>An asynchronous method. Check the argument and return types below.
options: { duration?: number; easing?: SpectrogramEasing; enabled?: boolean; type?: SpectrogramAnimationType }Promise<void>An asynchronous method. Check the argument and return types below.
Promise<void>An asynchronous method. Check the argument and return types below.
Promise<void>An asynchronous method. Check the argument and return types below.
Promise<void>An asynchronous method. Check the argument and return types below.
cssX: number, cssY: numberPromise<SpectrogramPointEventDetail | null>The cell under host-relative CSS coordinates, or null.
frame: number, bin: numberPromise<CartesianTooltipEventDetail | null>An asynchronous method. Check the argument and return types below.
index: numberPromise<CartesianTooltipEventDetail | null>An asynchronous method. Check the argument and return types below.
Promise<void>An asynchronous method. Check the argument and return types below.
frame: number, bin: numberPromise<SpectrogramPointEventDetail | null>An asynchronous method. Check the argument and return types below.
frame: number, bin: numberPromise<number | null>The dB value of a cell (`null` when empty or outside the grid).
Promise<SpectrogramValueExtent | null>The dB extent of the plane (min / max over the finite cells).
Promise<{ frames: number; bins: number; cells: number; dropped: number }>An asynchronous method. Check the argument and return types below.
Promise<SpectrogramRanges>The time and frequency ranges the plane spans.
samples: ArrayLike<number>Promise<SpectrogramAppendSamplesResult>An asynchronous method. Check the argument and return types below.
Promise<SpectrogramFftInfo>An asynchronous method. Check the argument and return types below.
binding: VisualMapBinding | nullPromise<VisualMapBinding | null>Bind (or clear with null) a visual-map snapshot; it wins over the `visualMap` prop until the prop changes again.
Promise<VisualMapBinding | null>An asynchronous method. Check the argument and return types below.
request?: VisualMapExtentRequestPromise<VisualMapExtent | null>The extent of a dimension: `value` = dB, `x` = time (s), `y` = frequency (Hz), `index` = the cell indexes.
request: CartesianZoomRequestPromise<CartesianZoomChangeEventDetail | null>Zoom to explicit windows in axis units: `x` (seconds) / `y` (Hz) as `{ min, max }` or `[min, max]` (`null` clears that orientation).
factor: number, anchorFraction?: numberPromise<CartesianZoomChangeEventDetail | null>Scale the current windows by `factor` (< 1 zooms in) around `anchorFraction` (0..1, default centre).
delta: { x?: number; y?: number }Promise<CartesianZoomChangeEventDetail | null>Slide the zoomed windows by axis units (`{ x?: seconds, y?: Hz }`); a no-op at the full extent.
Promise<CartesianZoomChangeEventDetail | null>Back to the whole plane.
Promise<CartesianZoomState | null>The current zoom state (`null` = the full extent).
request?: CartesianZoomExtentRequestPromise<CartesianZoomExtentDetail | null>The full extent (and key) of the primary — or the named — axes: the time span in seconds, the frequency span in Hz.
Promise<ChartEngineStatus>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.
ChartsTab Navigate Enter Open