{"spec_id":"area-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// area-basic: Basic Area Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-08-20\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Web server CPU utilization sampled every 30 minutes over a 24-hour window —\n// low overnight, ramping up through the workday, peaking mid-afternoon.\nfunction lcg(seed) {\n  let state = seed;\n  return function next() {\n    state = (state * 1103515245 + 12345) % 2147483648;\n    return state / 2147483648;\n  };\n}\nconst random = lcg(42);\n\nconst cpuUtilization = [];\nfor (let step = 0; step < 48; step += 1) {\n  const hour = step * 0.5;\n  const dailyCurve = 20 + 58 * Math.exp(-((hour - 14.5) ** 2) / (2 * 4.2 ** 2));\n  const noise = (random() - 0.5) * 7;\n  const timestamp = Date.UTC(2026, 0, 12, Math.floor(hour), (hour % 1) * 60);\n  const percent = Math.max(3, Math.min(97, dailyCurve + noise));\n  cpuUtilization.push([timestamp, Math.round(percent * 10) / 10]);\n}\n\n// Call out the daily peak with a highlighted marker + data label.\nlet peakIndex = 0;\nfor (let i = 1; i < cpuUtilization.length; i += 1) {\n  if (cpuUtilization[i][1] > cpuUtilization[peakIndex][1]) peakIndex = i;\n}\nconst [peakX, peakY] = cpuUtilization[peakIndex];\ncpuUtilization[peakIndex] = {\n  x: peakX,\n  y: peakY,\n  marker: {\n    enabled: true,\n    radius: 6,\n    fillColor: t.palette[0],\n    lineColor: t.pageBg,\n    lineWidth: 2,\n  },\n  dataLabels: {\n    enabled: true,\n    format: \"Peak {y}%\",\n    y: -16,\n    style: { color: t.ink, fontSize: \"13px\", fontWeight: \"600\", textOutline: \"none\" },\n  },\n};\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"area\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"area-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: \"Web server CPU utilization, 24-hour sample\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    type: \"datetime\",\n    tickInterval: 4 * 3600 * 1000,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      format: \"{value:%H:%M}\",\n    },\n    title: {\n      text: \"Time of Day (UTC)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n  },\n  yAxis: {\n    min: 0,\n    max: 100,\n    tickInterval: 20,\n    gridLineColor: t.grid,\n    labels: {\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n      format: \"{value}%\",\n    },\n    title: {\n      text: \"CPU Utilization (%)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    plotBands: [\n      {\n        from: 70,\n        to: 100,\n        color: Highcharts.color(t.amber).setOpacity(0.12).get(\"rgba\"),\n        label: {\n          text: \"Elevated load\",\n          align: \"right\",\n          x: -8,\n          y: 14,\n          style: { color: t.inkSoft, fontSize: \"12px\" },\n        },\n      },\n    ],\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    area: {\n      lineWidth: 3,\n      lineColor: t.palette[0],\n      fillColor: {\n        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n        stops: [\n          [0, Highcharts.color(t.palette[0]).setOpacity(0.45).get(\"rgba\")],\n          [1, Highcharts.color(t.palette[0]).setOpacity(0.02).get(\"rgba\")],\n        ],\n      },\n      marker: { enabled: false, states: { hover: { enabled: true, radius: 5 } } },\n      states: { hover: { lineWidthPlus: 0 } },\n    },\n  },\n  series: [{ name: \"CPU Utilization\", data: cpuUtilization }],\n});\n"}