Displays the autocorrelation function (ACF) and partial autocorrelation function (PACF) of a time series as vertical stem/bar plots arranged in two vertically stacked subplots. Each lag is represented by a vertical line from zero to the correlation value, with horizontal dashed lines indicating 95% confidence bounds. These plots are essential for identifying the order of AR and MA components in ARIMA modeling and for diagnosing residual independence.
// anyplot.ai
// acf-pacf: Autocorrelation and Partial Autocorrelation (ACF/PACF) Plot
// Library: muix 7.29.1 | JavaScript 22.22.3
// Quality: 84/100 | Created: 2026-06-10
//# anyplot-orientation: landscape
// anyplot.ai
// acf-pacf: Autocorrelation and Partial Autocorrelation (ACF/PACF) Plot
// Library: MUI X Charts | React | Node 22
// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.
// Quality: pending | Created: 2026-06-10
import { BarChart } from "@mui/x-charts/BarChart";
import { ChartsReferenceLine } from "@mui/x-charts/ChartsReferenceLine";
const t = window.ANYPLOT_TOKENS;
// --- Deterministic LCG RNG (seed = 42) ---------------------------------------
function lcgRng(seed) {
let s = seed >>> 0;
return () => {
s = (Math.imul(s, 1664525) + 1013904223) >>> 0;
return s / 4294967296;
};
}
function randn(rng) {
const u = Math.max(rng(), 1e-10);
return Math.sqrt(-2 * Math.log(u)) * Math.cos(2 * Math.PI * rng());
}
// --- AR(2) time series: x_t = 0.65·x_{t-1} + 0.15·x_{t-2} + ε_t -----------
const rng = lcgRng(42);
const N = 300;
const ts = [0, randn(rng) * 0.5];
for (let i = 2; i < N; i++) {
ts.push(0.65 * ts[i - 1] + 0.15 * ts[i - 2] + randn(rng));
}
// Centre and scale
const mu = ts.reduce((a, b) => a + b, 0) / N;
const cx = ts.map((x) => x - mu);
const c0 = cx.reduce((s, v) => s + v * v, 0) / N;
// ACF at lag h
function acfAt(h) {
let s = 0;
for (let i = h; i < N; i++) s += cx[i] * cx[i - h];
return s / (N * c0);
}
const MAX_LAG = 30;
const rho = Array.from({ length: MAX_LAG + 1 }, (_, k) => acfAt(k));
// PACF via Durbin–Levinson recursion
function computePACF(rhoArr, maxLag) {
const pacf = [1, rhoArr[1]];
let phi = [rhoArr[1]];
for (let k = 2; k <= maxLag; k++) {
let num = rhoArr[k];
let den = 1;
for (let j = 0; j < k - 1; j++) {
num -= phi[j] * rhoArr[k - 1 - j];
den -= phi[j] * rhoArr[j + 1];
}
const pkk = den !== 0 ? num / den : 0;
pacf.push(pkk);
const next = Array(k).fill(0);
next[k - 1] = pkk;
for (let j = 0; j < k - 1; j++) next[j] = phi[j] - pkk * phi[k - 2 - j];
phi = next;
}
return pacf;
}
const pacf = computePACF(rho, MAX_LAG);
// 95% CI: ±1.96 / √N
const CI = 1.96 / Math.sqrt(N);
const round4 = (v) => Math.round(v * 10000) / 10000;
const acfLags = Array.from({ length: MAX_LAG + 1 }, (_, i) => String(i));
const pacfLags = Array.from({ length: MAX_LAG }, (_, i) => String(i + 1));
const acfData = rho.map(round4);
const pacfData = pacf.slice(1).map(round4);
// --- Chart -------------------------------------------------------------------
export default function Chart() {
const W = window.ANYPLOT_SIZE.width;
const H = window.ANYPLOT_SIZE.height;
const TITLE_H = 54;
const PANEL_H = Math.floor((H - TITLE_H - 6) / 2);
const barColor = t.palette[0]; // #009E73 — brand green
const ciLineStyle = {
stroke: t.inkSoft,
strokeDasharray: "7 4",
strokeWidth: 1.5,
strokeOpacity: 0.85,
};
const zeroLineStyle = {
stroke: t.inkSoft,
strokeWidth: 0.7,
strokeOpacity: 0.45,
};
const tickStyle = { fontSize: 12, fill: t.inkSoft };
const labelStyle = { fontSize: 14, fill: t.ink };
const axisLineSx = {
"& .MuiChartsAxis-line": { stroke: t.grid },
};
const xAxisBase = {
scaleType: "band" as const,
categoryGapRatio: 0.62,
tickLabelStyle: tickStyle,
};
const yAxisBase = {
tickMinStep: 0.25,
tickLabelStyle: tickStyle,
labelStyle,
};
return (
<div
style={{
width: W,
height: H,
background: t.pageBg,
display: "flex",
flexDirection: "column",
fontFamily: "'Roboto', 'Helvetica Neue', Arial, sans-serif",
}}
>
{/* Title */}
<div
style={{
height: TITLE_H,
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 22,
fontWeight: 600,
color: t.ink,
letterSpacing: 0.15,
}}
>
AR(2) Process · acf-pacf · javascript · muix · anyplot.ai
</div>
{/* ACF panel */}
<div style={{ height: PANEL_H, flexShrink: 0 }}>
<BarChart
width={W}
height={PANEL_H}
skipAnimation
colors={[barColor]}
xAxis={[{ ...xAxisBase, data: acfLags }]}
yAxis={[{ ...yAxisBase, label: "ACF", min: -0.35, max: 1.05 }]}
series={[{ data: acfData, label: "ACF" }]}
margin={{ top: 20, bottom: 28, left: 80, right: 65 }}
slotProps={{ legend: { hidden: true } }}
sx={axisLineSx}
>
<ChartsReferenceLine
y={CI}
lineStyle={ciLineStyle}
label="95% CI"
labelStyle={{ fontSize: 11, fill: t.inkSoft }}
labelAlign="end"
/>
<ChartsReferenceLine y={-CI} lineStyle={ciLineStyle} />
<ChartsReferenceLine y={0} lineStyle={zeroLineStyle} />
</BarChart>
</div>
{/* PACF panel */}
<div style={{ flex: 1 }}>
<BarChart
width={W}
height={PANEL_H}
skipAnimation
colors={[barColor]}
xAxis={[{
...xAxisBase,
data: pacfLags,
label: "Lag",
labelStyle,
}]}
yAxis={[{ ...yAxisBase, label: "PACF" }]}
series={[{ data: pacfData, label: "PACF" }]}
margin={{ top: 10, bottom: 50, left: 80, right: 65 }}
slotProps={{ legend: { hidden: true } }}
sx={axisLineSx}
>
<ChartsReferenceLine y={CI} lineStyle={ciLineStyle} />
<ChartsReferenceLine y={-CI} lineStyle={ciLineStyle} />
<ChartsReferenceLine y={0} lineStyle={zeroLineStyle} />
</BarChart>
</div>
</div>
);
}
Runnable source as JSON, for any HTTP client: https://api.anyplot.ai/specs/acf-pacf/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": "acf-pacf",
"language": "javascript",
"library": "muix",
"page": "https://anyplot.ai/acf-pacf/javascript/muix",
"hub": "https://anyplot.ai/acf-pacf",
"code_json": "https://api.anyplot.ai/specs/acf-pacf/muix/code",
"spec_json": "https://api.anyplot.ai/specs/acf-pacf",
"render_light_png": "https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/muix/plot-light.png",
"render_dark_png": "https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/muix/plot-dark.png",
"interactive_light_html": "https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/muix/plot-light.html",
"interactive_dark_html": "https://storage.googleapis.com/anyplot-images/plots/acf-pacf/javascript/muix/plot-dark.html",
"quality_score": 84.0,
"license": "MIT",
"guide": "https://anyplot.ai/llms.txt"
}Part of Autocorrelation and Partial Autocorrelation (ACF/PACF) Plot on anyplot.ai.