{"spec_id":"sparkline-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// sparkline-basic: Basic Sparkline\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 90/100 | Created: 2026-09-09\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic LCG — daily active users, thousands) --\nfunction lcg(seed) {\n  let state = seed % 2147483647;\n  if (state <= 0) state += 2147483646;\n  return function () {\n    state = (state * 48271) % 2147483647;\n    return (state - 1) / 2147483646;\n  };\n}\nconst rand = lcg(42);\nconst days = 60;\nconst values = [];\nlet level = 58;\nfor (let i = 0; i < days; i++) {\n  level = Math.max(30, level + 0.35 + (rand() - 0.5) * 4.5);\n  values.push(Math.round(level * 10) / 10);\n}\n\nconst minIndex = values.indexOf(Math.min(...values));\nconst maxIndex = values.indexOf(Math.max(...values));\nconst lastIndex = values.length - 1;\nconst dataRange = values[maxIndex] - values[minIndex];\n\nconst referenceMarker = {\n  enabled: true,\n  radius: 5,\n  fillColor: t.ink,\n  lineColor: t.pageBg,\n  lineWidth: 1.5,\n};\n\nconst seriesData = values.map((value, index) => {\n  if (index === lastIndex) {\n    return {\n      y: value,\n      marker: { enabled: true, radius: 7, fillColor: t.palette[0], lineColor: t.pageBg, lineWidth: 2 },\n      dataLabels: {\n        enabled: true,\n        format: `${value}K`,\n        align: \"left\",\n        verticalAlign: \"middle\",\n        x: 16,\n        crop: false,\n        overflow: \"allow\",\n        style: { color: t.ink, fontSize: \"18px\", fontWeight: \"600\", textOutline: \"none\" },\n      },\n    };\n  }\n  if (index === minIndex || index === maxIndex) {\n    return { y: value, marker: referenceMarker };\n  }\n  return value;\n});\n\nconst title = \"Daily Active Users · sparkline-basic · javascript · highcharts · anyplot.ai\";\nconst titleFontSize = Math.round(22 * Math.min(1, 67 / title.length));\n\n// --- Chart -------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"areaspline\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    margin: [90, 90, 30, 30],\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: title,\n    align: \"left\",\n    style: { color: t.ink, fontSize: `${titleFontSize}px`, fontWeight: \"600\" },\n  },\n  xAxis: { visible: false },\n  yAxis: {\n    visible: false,\n    startOnTick: false,\n    endOnTick: false,\n    // Pad by a full data-range width on each side so the trend line occupies\n    // roughly the middle third of the plot area — a compact sparkline band\n    // rather than a full-bleed area chart.\n    min: Math.floor(Math.min(...values) - dataRange),\n    max: Math.ceil(Math.max(...values) + dataRange),\n  },\n  legend: { enabled: false },\n  tooltip: {\n    backgroundColor: t.elevatedBg,\n    borderWidth: 0,\n    style: { color: t.ink, fontSize: \"14px\" },\n    valueSuffix: \"K DAU\",\n  },\n  plotOptions: {\n    series: { animation: false },\n    areaspline: {\n      lineWidth: 2.5,\n      color: t.palette[0],\n      // Cap the fill's baseline close to the data minimum instead of the\n      // default 0 (which sits far below the padded yAxis min and would\n      // otherwise render the fill all the way to the bottom of the canvas).\n      threshold: Math.floor(Math.min(...values) - dataRange * 0.15),\n      fillColor: {\n        linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },\n        stops: [\n          [0, Highcharts.color(t.palette[0]).setOpacity(0.28).get()],\n          [1, Highcharts.color(t.palette[0]).setOpacity(0.02).get()],\n        ],\n      },\n      marker: { enabled: false },\n    },\n  },\n  series: [{ name: \"Daily active users\", data: seriesData }],\n});\n"}