Spectrum Chart — cinder playground

Overview

Responsive SVG frequency-bin bar chart for visualizing audio spectrum magnitude data.

<script lang="ts">
  import { SpectrumChart } from '@lostgradient/cinder/spectrum-chart';
</script>

Displaying pre-computed frequency-domain magnitude data from an FFT or spectrum analyzer.
Showing a static frequency response or spectrum snapshot with labelled frequency bins.

Real-time live audio spectrum is needed — feed live AnalyserNode data as props yourself.
A full time × frequency heatmap is needed — use spectrogram instead.
General categorical bar comparison — use bar-chart instead.

Live preview

Use when

Displaying pre-computed frequency-domain magnitude data from an FFT or spectrum analyzer.
Showing a static frequency response or spectrum snapshot with labelled frequency bins.

Avoid when

Real-time live audio spectrum is needed — feed live AnalyserNode data as props yourself.
A full time × frequency heatmap is needed — use spectrogram instead.
General categorical bar comparison — use bar-chart instead.

Pre-computed FFT magnitude spectrum showing frequency content of a signal.

Props for spectrum-chart
Name	Type	Default	Required	Description
`label`	`text`		req	Accessible label for the chart. Required for screen readers.
`description`	`text`			Optional description rendered below the label.
`bins`	`SpectrumBin[]`		req	Frequency bins with label + magnitude value.
`height`	`number`	`160`		Pixel height of the chart. Default `160`.
`loading`	`boolean`	`false`		Whether the chart is in a loading state.
`dataTableVisibility`	`'screen-reader-only' \| 'visible' \| 'hidden'`	`'screen-reader-only'`		Controls data table visibility. Default `screen-reader-only`.
`dataTableCaption`	`text`			Custom data table caption; falls back to `label`.
`empty`	`snippet`			Snippet rendered when there are no bins.
`loadingContent`	`snippet`			Snippet rendered while loading.
`id`	`unknown`		req