Time Series with Rolling Average Overlay — Highcharts

A time series plot that displays raw data points alongside a smoothed rolling average (moving average) line. The raw data shows actual observations while the rolling average reveals underlying trends by reducing noise and short-term fluctuations. This dual-layer visualization is essential for trend identification, making patterns visible that might be obscured by day-to-day volatility.

Time Series with Rolling Average Overlay rendered with Highcharts

Renders

JavaScript source (Highcharts)

// anyplot.ai
// line-timeseries-rolling: Time Series with Rolling Average Overlay
// Library: highcharts 12.6.0 | JavaScript 22.23.2
// Quality: 90/100 | Created: 2026-09-05

const t = window.ANYPLOT_TOKENS;

// --- Data (in-memory, deterministic fixed-seed LCG) ------------------------
// Hourly temperature sensor readings with noise, smoothed by a 24-hour
// rolling mean to reveal the underlying diurnal trend.
let seed = 42;
function lcgRandom() {
  seed = (seed * 1103515245 + 12345) % 2147483648;
  return seed / 2147483648;
}

const HOURS = 240; // 10 days of hourly readings
const WINDOW = 24; // 24-hour rolling window
const startDate = Date.UTC(2024, 5, 1, 0, 0, 0);
const hourMs = 3600 * 1000;

const rawSeries = [];
for (let i = 0; i < HOURS; i += 1) {
  const timestamp = startDate + i * hourMs;
  const diurnal = 6 * Math.sin((2 * Math.PI * (i % 24)) / 24 - Math.PI / 2);
  const drift = 2 * Math.sin((2 * Math.PI * i) / (24 * 6));
  const noise = (lcgRandom() - 0.5) * 3.5;
  const temperature = 18 + diurnal + drift + noise;
  rawSeries.push([timestamp, Number(temperature.toFixed(2))]);
}

const rollingSeries = [];
for (let i = WINDOW - 1; i < HOURS; i += 1) {
  let sum = 0;
  for (let w = i - WINDOW + 1; w <= i; w += 1) {
    sum += rawSeries[w][1];
  }
  rollingSeries.push([rawSeries[i][0], Number((sum / WINDOW).toFixed(2))]);
}

// --- Chart -------------------------------------------------------------
Highcharts.chart("container", {
  chart: {
    type: "line",
    backgroundColor: "transparent",
    animation: false,
    style: { fontFamily: "inherit" },
  },
  credits: { enabled: false },
  colors: t.palette,
  title: {
    text: "line-timeseries-rolling · javascript · highcharts · anyplot.ai",
    style: { color: t.ink, fontSize: "22px", fontWeight: "600" },
  },
  subtitle: {
    text: "Hourly sensor temperature with 24-hour rolling average",
    style: { color: t.inkSoft, fontSize: "14px" },
  },
  xAxis: {
    type: "datetime",
    lineColor: t.inkSoft,
    tickColor: t.inkSoft,
    gridLineColor: t.grid,
    gridLineWidth: 1,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
    title: { text: "Date", style: { color: t.inkSoft, fontSize: "16px" } },
  },
  yAxis: {
    title: {
      text: "Temperature (°C)",
      style: { color: t.inkSoft, fontSize: "16px" },
    },
    gridLineColor: t.grid,
    labels: { style: { color: t.inkSoft, fontSize: "14px" } },
  },
  legend: {
    itemStyle: { color: t.inkSoft, fontSize: "14px" },
    itemHoverStyle: { color: t.ink },
  },
  tooltip: { enabled: false },
  plotOptions: {
    series: { animation: false, marker: { enabled: false } },
  },
  series: [
    {
      name: "Raw Data",
      data: rawSeries,
      color: t.palette[0],
      opacity: 0.35,
      lineWidth: 1.5,
      zIndex: 1,
    },
    {
      name: "Rolling Average (24-Hour)",
      data: rollingSeries,
      color: t.palette[1],
      lineWidth: 3.5,
      zIndex: 2,
    },
  ],
});

Retrieve this implementation

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

Part of Time Series with Rolling Average Overlay on anyplot.ai.

Other implementations