Basic Stem Plot — MUI X Charts

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 MUI X Charts

Renders

JavaScript source (MUI X Charts)

// anyplot.ai
// stem-basic: Basic Stem Plot
// Library: muix 7.29.1 | JavaScript 22.23.1
// Quality: 87/100 | Created: 2026-07-25
//# anyplot-orientation: landscape
// anyplot.ai
// stem-basic: Basic Stem Plot
// Library: MUI X Charts | React | Node 22
// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.
// Quality: pending | Created: 2026-07-25

import { ChartContainer } from "@mui/x-charts/ChartContainer";
import { ScatterPlot } from "@mui/x-charts/ScatterChart";
import { ChartsReferenceLine } from "@mui/x-charts/ChartsReferenceLine";
import { ChartsXAxis } from "@mui/x-charts/ChartsXAxis";
import { ChartsYAxis } from "@mui/x-charts/ChartsYAxis";
import { ChartsGrid } from "@mui/x-charts/ChartsGrid";
import { useXScale, useYScale } from "@mui/x-charts";
import Box from "@mui/material/Box";
import Typography from "@mui/material/Typography";

const t = window.ANYPLOT_TOKENS;

// --- Data: damped-sinusoid impulse response, 40 discrete samples ------------
const N_SAMPLES = 40;
const sampleIndex = Array.from({ length: N_SAMPLES }, (_, n) => n);
const amplitude = sampleIndex.map((n) => Math.exp(-0.12 * n) * Math.cos(0.6 * n));
const scatterData = sampleIndex.map((n, i) => ({ x: n, y: amplitude[i], id: i }));

const Y_PAD = 0.15;
const yMin = Math.min(...amplitude) - Y_PAD;
const yMax = Math.max(...amplitude) + Y_PAD;

// Renders the stems (baseline-to-value lines); markers come from ScatterPlot.
// Must be rendered inside ChartContainer to access its scale context.
function Stems() {
  const xScale = useXScale();
  const yScale = useYScale();
  const y0 = yScale(0);

  return (
    <g>
      {sampleIndex.map((n, i) => (
        <line
          key={n}
          x1={xScale(n)}
          x2={xScale(n)}
          y1={y0}
          y2={yScale(amplitude[i])}
          stroke={t.palette[0]}
          strokeWidth={2.5}
          strokeLinecap="round"
        />
      ))}
    </g>
  );
}

const TITLE = "stem-basic · javascript · muix · anyplot.ai";
const TITLE_HEIGHT = 70;
const MARGIN = { top: 20, right: 50, bottom: 70, left: 90 };

export default function Chart() {
  const chartWidth = window.ANYPLOT_SIZE.width;
  const chartHeight = window.ANYPLOT_SIZE.height - TITLE_HEIGHT;

  return (
    <Box
      sx={{
        width: chartWidth,
        height: window.ANYPLOT_SIZE.height,
        display: "flex",
        flexDirection: "column",
      }}
    >
      <Box
        sx={{
          height: TITLE_HEIGHT,
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          flexShrink: 0,
        }}
      >
        <Typography sx={{ color: t.ink, fontSize: 22, fontWeight: 500 }}>
          {TITLE}
        </Typography>
      </Box>

      <ChartContainer
        skipAnimation
        width={chartWidth}
        height={chartHeight}
        margin={MARGIN}
        series={[{
          type: "scatter",
          data: scatterData,
          color: t.palette[0],
          markerSize: 9,
        }]}
        xAxis={[{
          scaleType: "linear",
          min: -1,
          max: N_SAMPLES,
          label: "Sample Index (n)",
          labelStyle: { fontSize: 15, fill: t.ink },
          tickLabelStyle: { fontSize: 13, fill: t.inkSoft },
        }]}
        yAxis={[{
          scaleType: "linear",
          min: yMin,
          max: yMax,
          label: "Amplitude",
          labelStyle: { fontSize: 15, fill: t.ink },
          tickLabelStyle: { fontSize: 13, fill: t.inkSoft },
        }]}
        sx={{
          "& .MuiChartsGrid-line": { stroke: t.grid, strokeOpacity: 0.5 },
        }}
      >
        <ChartsGrid horizontal />
        <ChartsReferenceLine
          y={0}
          lineStyle={{ stroke: t.inkSoft, strokeWidth: 1.5 }}
        />
        <Stems />
        <ScatterPlot />
        <ChartsXAxis />
        <ChartsYAxis />
      </ChartContainer>
    </Box>
  );
}

Retrieve this implementation

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

Part of Basic Stem Plot on anyplot.ai.

Other implementations