Basic Stem Plot — Highcharts

A stem plot displays data points as markers connected to a baseline by vertical lines (stems). Each data point is represented by a marker at the data value with a thin line extending down to a baseline, making it ideal for visualizing discrete or sequential data where individual values matter. This plot type is particularly useful in signal processing and scientific applications where the discrete nature of measurements needs emphasis.

Basic Stem Plot rendered with Highcharts

Renders

JavaScript source (Highcharts)

// anyplot.ai
// stem-basic: Basic Stem Plot
// Library: highcharts 12.6.0 | JavaScript 22.23.1
// Quality: 91/100 | Created: 2026-07-25

const t = window.ANYPLOT_TOKENS;

// --- Data: damped discrete-time impulse response (signal processing) -------
const sampleCount = 40;
const samples = [];
for (let n = 0; n < sampleCount; n += 1) {
  const amplitude = Math.exp(-n / 14) * Math.cos(n * 0.45);
  samples.push({ x: n, y: Math.round(amplitude * 1000) / 1000 });
}
const peakIndex = samples.reduce((best, s, i) => (s.y > samples[best].y ? i : best), 0);
const peakLabel = {
  enabled: true,
  format: "Peak",
  y: -16,
  style: { color: t.ink, fontSize: "13px", fontWeight: "600", textOutline: "none" },
};

// --- Chart -------------------------------------------------------------
// Highcharts has no lollipop/stem series in the core bundle, so the stem is
// built from two aligned series: a thin column (baseline-to-value stem) and
// a scatter series (the marker) — a standard core-only combo technique.
// `negativeColor` (a distinctive core-Highcharts zone feature) splits every
// stem/marker by sign — brand green above zero, Imprint diverging blue below
// — and a dataLabel callout marks the peak sample to guide the eye into the
// decay story.
Highcharts.chart("container", {
  chart: {
    type: "column",
    backgroundColor: "transparent",
    animation: false,
    style: { fontFamily: "inherit" },
  },
  credits: { enabled: false },
  colors: t.palette,
  title: {
    text: "stem-basic · javascript · highcharts · anyplot.ai",
    style: { color: t.ink, fontSize: "22px", fontWeight: "600" },
  },
  xAxis: {
    title: { text: "Sample Index (n)", style: { color: t.inkSoft, fontSize: "16px" } },
    lineColor: t.inkSoft,
    tickColor: t.inkSoft,
    gridLineColor: t.grid,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
    min: -0.5,
    max: sampleCount - 0.5,
  },
  yAxis: {
    title: { text: "Amplitude", style: { color: t.inkSoft, fontSize: "16px" } },
    gridLineColor: t.grid,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
    plotLines: [{ value: 0, color: t.inkSoft, width: 1, zIndex: 2 }],
  },
  legend: { enabled: false },
  tooltip: { valueDecimals: 3 },
  plotOptions: {
    series: { animation: false, negativeColor: t.div[2] },
    column: { pointWidth: 3, pointPadding: 0, groupPadding: 0, borderWidth: 0 },
  },
  series: [
    {
      name: "Impulse response (stem)",
      type: "column",
      data: samples,
      color: t.palette[0],
      enableMouseTracking: false,
    },
    {
      name: "Impulse response",
      type: "scatter",
      data: samples.map((s, i) => (i === peakIndex ? { ...s, dataLabels: peakLabel } : s)),
      color: t.palette[0],
      marker: { radius: 8, symbol: "circle", lineColor: t.pageBg, lineWidth: 1 },
    },
  ],
});

Retrieve this implementation

Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/stem-basic/highcharts/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": "stem-basic",
  "language": "javascript",
  "library": "highcharts",
  "page": "https://anyplot.ai/stem-basic/javascript/highcharts",
  "hub": "https://anyplot.ai/stem-basic",
  "code_json": "https://api.anyplot.ai/specs/stem-basic/highcharts/code",
  "spec_json": "https://api.anyplot.ai/specs/stem-basic",
  "render_light_png": "https://storage.googleapis.com/anyplot-images/plots/stem-basic/javascript/highcharts/plot-light.png",
  "render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/stem-basic/javascript/highcharts/plot-dark.png",
  "interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/stem-basic/javascript/highcharts/plot-light.html",
  "interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/stem-basic/javascript/highcharts/plot-dark.html",
  "quality_score": 91.0,
  "license": "MIT",
  "guide": "https://anyplot.ai/llms.txt"
}

Part of Basic Stem Plot on anyplot.ai.

Other implementations