{"spec_id":"stem-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// stem-basic: Basic Stem Plot\n// Library: muix 7.29.1 | JavaScript 22.23.1\n// Quality: 87/100 | Created: 2026-07-25\n//# anyplot-orientation: landscape\n// anyplot.ai\n// stem-basic: Basic Stem Plot\n// Library: MUI X Charts | React | Node 22\n// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.\n// Quality: pending | Created: 2026-07-25\n\nimport { ChartContainer } from \"@mui/x-charts/ChartContainer\";\nimport { ScatterPlot } from \"@mui/x-charts/ScatterChart\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\nimport { ChartsXAxis } from \"@mui/x-charts/ChartsXAxis\";\nimport { ChartsYAxis } from \"@mui/x-charts/ChartsYAxis\";\nimport { ChartsGrid } from \"@mui/x-charts/ChartsGrid\";\nimport { useXScale, useYScale } from \"@mui/x-charts\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: damped-sinusoid impulse response, 40 discrete samples ------------\nconst N_SAMPLES = 40;\nconst sampleIndex = Array.from({ length: N_SAMPLES }, (_, n) => n);\nconst amplitude = sampleIndex.map((n) => Math.exp(-0.12 * n) * Math.cos(0.6 * n));\nconst scatterData = sampleIndex.map((n, i) => ({ x: n, y: amplitude[i], id: i }));\n\nconst Y_PAD = 0.15;\nconst yMin = Math.min(...amplitude) - Y_PAD;\nconst yMax = Math.max(...amplitude) + Y_PAD;\n\n// Renders the stems (baseline-to-value lines); markers come from ScatterPlot.\n// Must be rendered inside ChartContainer to access its scale context.\nfunction Stems() {\n  const xScale = useXScale();\n  const yScale = useYScale();\n  const y0 = yScale(0);\n\n  return (\n    <g>\n      {sampleIndex.map((n, i) => (\n        <line\n          key={n}\n          x1={xScale(n)}\n          x2={xScale(n)}\n          y1={y0}\n          y2={yScale(amplitude[i])}\n          stroke={t.palette[0]}\n          strokeWidth={2.5}\n          strokeLinecap=\"round\"\n        />\n      ))}\n    </g>\n  );\n}\n\nconst TITLE = \"stem-basic · javascript · muix · anyplot.ai\";\nconst TITLE_HEIGHT = 70;\nconst MARGIN = { top: 20, right: 50, bottom: 70, left: 90 };\n\nexport default function Chart() {\n  const chartWidth = window.ANYPLOT_SIZE.width;\n  const chartHeight = window.ANYPLOT_SIZE.height - TITLE_HEIGHT;\n\n  return (\n    <Box\n      sx={{\n        width: chartWidth,\n        height: window.ANYPLOT_SIZE.height,\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      <Box\n        sx={{\n          height: TITLE_HEIGHT,\n          display: \"flex\",\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          flexShrink: 0,\n        }}\n      >\n        <Typography sx={{ color: t.ink, fontSize: 22, fontWeight: 500 }}>\n          {TITLE}\n        </Typography>\n      </Box>\n\n      <ChartContainer\n        skipAnimation\n        width={chartWidth}\n        height={chartHeight}\n        margin={MARGIN}\n        series={[{\n          type: \"scatter\",\n          data: scatterData,\n          color: t.palette[0],\n          markerSize: 9,\n        }]}\n        xAxis={[{\n          scaleType: \"linear\",\n          min: -1,\n          max: N_SAMPLES,\n          label: \"Sample Index (n)\",\n          labelStyle: { fontSize: 15, fill: t.ink },\n          tickLabelStyle: { fontSize: 13, fill: t.inkSoft },\n        }]}\n        yAxis={[{\n          scaleType: \"linear\",\n          min: yMin,\n          max: yMax,\n          label: \"Amplitude\",\n          labelStyle: { fontSize: 15, fill: t.ink },\n          tickLabelStyle: { fontSize: 13, fill: t.inkSoft },\n        }]}\n        sx={{\n          \"& .MuiChartsGrid-line\": { stroke: t.grid, strokeOpacity: 0.5 },\n        }}\n      >\n        <ChartsGrid horizontal />\n        <ChartsReferenceLine\n          y={0}\n          lineStyle={{ stroke: t.inkSoft, strokeWidth: 1.5 }}\n        />\n        <Stems />\n        <ScatterPlot />\n        <ChartsXAxis />\n        <ChartsYAxis />\n      </ChartContainer>\n    </Box>\n  );\n}\n"}