{"spec_id":"line-filled","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// line-filled: Filled Line Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 84/100 | Created: 2026-09-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic — daily reservoir level over 30 days) --\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1664525 + 1013904223) % 4294967296;\n    return state / 4294967296;\n  };\n}\nconst rand = lcg(42);\n\nconst days = Array.from({ length: 30 }, (_, i) => i);\nconst levels = [];\nlet level = 42;\nfor (let i = 0; i < days.length; i++) {\n  level += (rand() - 0.42) * 4;\n  level = Math.max(20, level);\n  levels.push(Math.round(level * 10) / 10);\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: \"Reservoir Water Level · line-filled · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    title: { text: \"Day\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    gridLineColor: t.grid,\n    categories: days.map(String),\n    tickInterval: 5,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: { text: \"Water Level (m)\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    min: 0,\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: { enabled: false },\n  tooltip: {\n    backgroundColor: t.elevatedBg,\n    borderColor: t.grid,\n    style: { color: t.ink, fontSize: \"13px\" },\n    headerFormat: \"Day {point.key}<br/>\",\n    pointFormat: \"Water Level: <b>{point.y} m</b>\",\n  },\n  plotOptions: {\n    series: { animation: false },\n    area: {\n      lineWidth: 2.5,\n      color: t.palette[0],\n      fillColor: {\n        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n        stops: [\n          [0, t.palette[0] + \"8C\"],\n          [1, t.palette[0] + \"21\"],\n        ],\n      },\n      marker: { enabled: true, radius: 3, fillColor: t.palette[0], lineWidth: 0 },\n      threshold: 0,\n    },\n  },\n  series: [{ name: \"Water Level\", data: levels }],\n});\n"}