{"spec_id":"stem-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// stem-basic: Basic Stem Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 91/100 | Created: 2026-07-25\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data: damped discrete-time impulse response (signal processing) -------\nconst sampleCount = 40;\nconst samples = [];\nfor (let n = 0; n < sampleCount; n += 1) {\n  const amplitude = Math.exp(-n / 14) * Math.cos(n * 0.45);\n  samples.push({ x: n, y: Math.round(amplitude * 1000) / 1000 });\n}\nconst peakIndex = samples.reduce((best, s, i) => (s.y > samples[best].y ? i : best), 0);\nconst peakLabel = {\n  enabled: true,\n  format: \"Peak\",\n  y: -16,\n  style: { color: t.ink, fontSize: \"13px\", fontWeight: \"600\", textOutline: \"none\" },\n};\n\n// --- Chart -------------------------------------------------------------\n// Highcharts has no lollipop/stem series in the core bundle, so the stem is\n// built from two aligned series: a thin column (baseline-to-value stem) and\n// a scatter series (the marker) — a standard core-only combo technique.\n// `negativeColor` (a distinctive core-Highcharts zone feature) splits every\n// stem/marker by sign — brand green above zero, Imprint diverging blue below\n// — and a dataLabel callout marks the peak sample to guide the eye into the\n// decay story.\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"column\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"stem-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: { text: \"Sample Index (n)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    min: -0.5,\n    max: sampleCount - 0.5,\n  },\n  yAxis: {\n    title: { text: \"Amplitude\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [{ value: 0, color: t.inkSoft, width: 1, zIndex: 2 }],\n  },\n  legend: { enabled: false },\n  tooltip: { valueDecimals: 3 },\n  plotOptions: {\n    series: { animation: false, negativeColor: t.div[2] },\n    column: { pointWidth: 3, pointPadding: 0, groupPadding: 0, borderWidth: 0 },\n  },\n  series: [\n    {\n      name: \"Impulse response (stem)\",\n      type: \"column\",\n      data: samples,\n      color: t.palette[0],\n      enableMouseTracking: false,\n    },\n    {\n      name: \"Impulse response\",\n      type: \"scatter\",\n      data: samples.map((s, i) => (i === peakIndex ? { ...s, dataLabels: peakLabel } : s)),\n      color: t.palette[0],\n      marker: { radius: 8, symbol: \"circle\", lineColor: t.pageBg, lineWidth: 1 },\n    },\n  ],\n});\n"}