SpectraViewer1D is the primary class for rendering 1D spectra in JSpectraViewer. It supports NMR, IR, UV/Vis, LC-MS, and EI-MS spectrum types. Initialize it with a container selector and an options object, then call draw() to render. It supports mirror plots, zoom/pan controls, a zoombox overview, and — for NMR — an integrated assignment table and 3D structure viewer.

Usage:

Initialize with a CSS selector pointing to the container element and an options object. Call draw() after construction to render the spectrum.

import { SpectraViewer1D } from 'jsv2';
let viewer = new SpectraViewer1D("#graph-container", {
  name: "nmr-viewer",
  width: 1000,
  height: 400,
  chartType: "1D-NMR",
  dataset: [{
    dataArray: { x: [...], y: [...] },
    normalize: true,
    style: { strokeColor: "red", strokeWidth: 1 },
  }],
  axis: {
    x: { enabled: true, reverse: true, label: { text: "Chemical Shift (ppm)" } },
    y: { enabled: true, label: { text: "Intensity" } },
  },
  controls: { enabled: true },
});
viewer.draw();

Options:

A unique identifier for this viewer instance.

string | default: null

Width of the viewer canvas in pixels.

number | default: 800

Height of the viewer canvas in pixels.

number | default: 400

Inner padding around the plot area in pixels.

object | default: { top: 50, bottom: 50, right: 50, left: 90 }

Specifies the spectrum type. Controls axis defaults, bar vs. line rendering, and peak handling.

string | default: "1D-NMR" | ["1D-NMR", "1D-EIMS", "1D-LCMS", "1D-IR", "1D-UV"]

Optional title rendered above the plot.

• text: title string
• fontSize: font size in pixels
• color: CSS color string
• underline: boolean

object | default: null

Global tolerance for the Douglas-Peucker line simplification applied to all datasets.

Lower values preserve more detail; higher values improve render performance. Can also be set per dataset.number | default: 0.005

dataset

An array of dataset objects to render. Each object describes one spectrum trace.

dataset: [{
  dataArray: { x: [...], y: [...] },
  isMirrorPlot: false,
  normalize: true,
  name: "My Spectrum",
  id: "trace-1",
  simplifyTolerance: 0.001,
  style: { strokeColor: "red", strokeWidth: 1 },
}]

The raw spectrum data. Both arrays must be the same length.

• x: array of x values (ppm, m/z, wavenumber, wavelength)
• y: array of y intensity values

object | required

When true, y values are normalized so the maximum equals 1.

boolean | default: false

When true, the dataset is rendered below the x-axis as a mirror spectrum for comparison.

boolean | default: false

Display name for this trace, shown in the legend.

string | default: null

Unique identifier for this trace. Used when programmatically referencing the dataset.

string | default: null

Per-dataset Douglas-Peucker tolerance. Overrides the top-level simplifyTolerance.

number | default: inherits top-level value

Visual style for this trace.

• strokeColor: CSS color string for the line
• strokeWidth: line width in pixels

object | default: { strokeColor: "steelblue", strokeWidth: 1 }

axis

Sets the minimum visible range for each axis. The viewer will not zoom out beyond these values.

• x: [min, max]
• y: [min, max]

object | default: derived from data

Configuration for each axis. Both share the same shape.

• enabled: boolean — show or hide this axis
• reverse: boolean — reverse the axis direction (e.g. NMR ppm, IR wavenumber)
• label.text: axis label string
• label.fontSize: label font size in pixels
• ticks: approximate number of tick marks

object | default: { enabled: true, reverse: false, ticks: 10 }

grid

Configuration for horizontal and vertical grid lines. Both share the same shape.

• enabled: boolean
• strokeColor: CSS color string
• strokeWidth: line width in pixels
• opacity: 0–1
• ticks: number of grid lines

object | default: disabled

zoomBox

An overview minimap rendered in a corner of the viewer showing the full spectrum with a highlighted window indicating the current zoom region.

Show or hide the zoombox.

boolean | default: false

Corner in which to render the zoombox.

string | default: "top-right" | ["top-right", "top-left", "bottom-right", "bottom-left"]

Dimensions of the zoombox in pixels.

number | default: 200 / 100

controls

Show or hide the toolbar of interaction controls.

boolean | default: false

Configure zoom behaviour.

• horizontal: boolean — allow horizontal zoom
• vertical: boolean — allow vertical zoom
• max: maximum zoom multiplier

object

Configure pan behaviour.

• horizontal: boolean
• vertical: boolean

object

Show a reset button that returns the view to the initial zoom and pan.

boolean | default: false

Enable a download button.

• formats: array of export formats — ["png", "svg", "pdf"]
• filename: default filename (without extension)

object | default: null

assignmentTable

NMR only. Renders a peak assignment table linked to the spectrum and optionally a 3D structure viewer. Requires NMR assignment data from the DataParser.

assignmentTable: {
  enabled: true,
  containerID: "#assignments",
  clusterNavigationID: "#cluster-navigation-1",
  data: [event.detail.assignmentData],
  structure: {
    containerID: "#structure",
    use_jsmol: true,
    show_atom_numbers: true,
    show_hydrogen: true,
    width: 400,
    height: 400,
    format: "nmrml",
  },
}

boolean | default: false

CSS selector for the element that will contain the assignment table.

string | required

CSS selector for the cluster navigation element (multiplet navigator).

string | default: null

Assignment data array from event.detail.assignmentData provided by DataParser.

array | required

Configuration for the 3D molecular structure viewer panel.

• containerID: CSS selector for the structure container element
• use_jsmol: boolean — use JSmol for 3D rendering
• show_atom_numbers: boolean — overlay atom index labels
• show_hydrogen: boolean — show hydrogen atoms
• width / height: dimensions in pixels
• format: source format, e.g. "nmrml"

object | default: null

Methods

Renders the viewer into the container element. Must be called after construction.

| viewer.draw();

Adds a second spectrum rendered below the x-axis for side-by-side comparison.

• x: array of x values
• y: array of y values
• name: display name for the mirror trace
• color: CSS color string

viewer.add_mirror_spectrum({
  x: event.detail.x,
  y: event.detail.y,
  name: "Mirror Spectrum",
  color: "blue",
});

Removes the mirror spectrum and restores the original y-axis range.

| viewer.remove_mirror_spectrum();