Frequency Spectrum Plot — Apache ECharts

A frequency spectrum plot displays signal amplitude or power across a range of frequencies, showing the frequency domain representation of time-series data. This visualization reveals the frequency components present in a signal, making it essential for identifying dominant frequencies, harmonics, and noise characteristics. It is fundamental in signal processing, audio engineering, and vibration analysis.

Frequency Spectrum Plot rendered with Apache ECharts

Renders

JavaScript source (Apache ECharts)

// anyplot.ai
// spectrum-basic: Frequency Spectrum Plot
// Library: echarts 6.1.0 | JavaScript 22.23.2
// Quality: 89/100 | Created: 2026-09-09

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic) ----------------------------------------
// Synthetic vibration signal: three characteristic machinery frequencies
// (running speed 60 Hz, gear mesh 240 Hz, bearing fault 850 Hz) plus a
// 1/f-shaped noise floor, expressed as a power spectrum in dB.
const SAMPLE_RATE = 4096;
const NUM_BINS = 1024;
const PEAKS = [
  { freq: 60, amplitude: 1.0, width: 3, role: "running speed" },
  { freq: 240, amplitude: 0.55, width: 5, role: "gear mesh" },
  { freq: 850, amplitude: 0.32, width: 9, role: "bearing fault" },
];

// Tiny fixed-seed LCG for reproducible pseudo-noise.
let lcgState = 42;
function nextRandom() {
  lcgState = (lcgState * 1103515245 + 12345) % 2147483648;
  return lcgState / 2147483648;
}

const frequencies = [];
const amplitudesDb = [];
for (let i = 1; i < NUM_BINS; i += 1) {
  const freq = (i / NUM_BINS) * (SAMPLE_RATE / 2);
  let magnitude = 0.02 + 0.6 / freq; // 1/f-shaped noise floor
  for (const peak of PEAKS) {
    const distance = (freq - peak.freq) / peak.width;
    magnitude += peak.amplitude * Math.exp(-distance * distance);
  }
  magnitude *= 1 + (nextRandom() - 0.5) * 0.08; // small measurement jitter
  frequencies.push(Math.round(freq * 10) / 10);
  amplitudesDb.push(Math.round(20 * Math.log10(magnitude) * 10) / 10);
}

const dominantIndices = PEAKS.map((peak) => {
  let closest = 0;
  let closestDist = Infinity;
  frequencies.forEach((f, idx) => {
    const dist = Math.abs(f - peak.freq);
    if (dist < closestDist) {
      closestDist = dist;
      closest = idx;
    }
  });
  return closest;
});

// --- Init --------------------------------------------------------------------
const chart = echarts.init(document.getElementById("container"));

// --- Option --------------------------------------------------------------------
chart.setOption({
  animation: false,
  color: t.palette,
  backgroundColor: "transparent",
  title: {
    text: "Machinery Vibration Spectrum · spectrum-basic · javascript · echarts · anyplot.ai",
    left: "center",
    top: 18,
    textStyle: { color: t.ink, fontSize: 18, fontWeight: 500 },
  },
  legend: {
    data: ["Power spectrum", "Dominant frequencies"],
    top: 54,
    textStyle: { color: t.ink, fontSize: 14 },
  },
  grid: { left: 90, right: 60, top: 130, bottom: 90 },
  xAxis: {
    type: "log",
    name: "Frequency (Hz)",
    nameLocation: "middle",
    nameGap: 45,
    nameTextStyle: { color: t.ink, fontSize: 16 },
    min: 4,
    max: 2048,
    axisLabel: { color: t.inkSoft, fontSize: 14 },
    axisLine: { lineStyle: { color: t.inkSoft } },
    axisTick: { show: false },
    splitLine: { show: true, lineStyle: { color: t.grid } },
  },
  yAxis: {
    type: "value",
    name: "Power (dB)",
    nameLocation: "middle",
    nameGap: 60,
    nameTextStyle: { color: t.ink, fontSize: 16 },
    axisLabel: { color: t.inkSoft, fontSize: 14 },
    axisLine: { show: false },
    axisTick: { show: false },
    splitLine: { lineStyle: { color: t.grid } },
  },
  series: [
    {
      type: "line",
      name: "Power spectrum",
      data: frequencies.map((f, idx) => [f, amplitudesDb[idx]]),
      showSymbol: false,
      lineStyle: { color: t.palette[0], width: 2 },
      areaStyle: { color: t.palette[0], opacity: 0.15, origin: "start" },
    },
    {
      type: "scatter",
      name: "Dominant frequencies",
      data: dominantIndices.map((idx, i) => ({
        value: [frequencies[idx], amplitudesDb[idx]],
        name: `${PEAKS[i].freq} Hz — ${PEAKS[i].role}`,
      })),
      symbolSize: 14,
      itemStyle: {
        color: "transparent",
        borderColor: t.palette[1],
        borderWidth: 2.5,
      },
      label: {
        show: true,
        position: "top",
        distance: 8,
        formatter: (params) => params.name,
        color: t.ink,
        fontSize: 12,
        fontWeight: 500,
      },
    },
  ],
});

chart.on("finished", () => {
  window.__anyplotReady = true;
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/spectrum-basic/echarts/code. Any spec id and library id listed in llms-full.txt fit the same URL shape; every URL below is complete and callable.

{
  "spec_id": "spectrum-basic",
  "language": "javascript",
  "library": "echarts",
  "page": "https://anyplot.ai/spectrum-basic/javascript/echarts",
  "hub": "https://anyplot.ai/spectrum-basic",
  "code_json": "https://api.anyplot.ai/specs/spectrum-basic/echarts/code",
  "spec_json": "https://api.anyplot.ai/specs/spectrum-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/spectrum-basic/javascript/echarts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/spectrum-basic/javascript/echarts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/spectrum-basic/javascript/echarts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/spectrum-basic/javascript/echarts/plot-dark.html",
  "quality_score": 89.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Frequency Spectrum Plot on anyplot.ai.

Other implementations