{"spec_id":"count-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// count-basic: Basic Count Plot\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 94/100 | Created: 2026-08-11\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Raw per-checkout genre observations from a library lending log; the count\n// plot tallies occurrences from these raw records rather than pre-aggregated\n// values.\nfunction lcg(seed) {\n  let state = seed;\n  return () => {\n    state = (state * 1664525 + 1013904223) % 4294967296;\n    return state / 4294967296;\n  };\n}\nconst random = lcg(42);\n\nconst genres = [\n  \"Fiction\",\n  \"Fantasy\",\n  \"Mystery\",\n  \"Sci-Fi\",\n  \"Biography\",\n  \"Romance\",\n  \"History\",\n  \"Poetry\",\n];\nconst weights = [0.22, 0.18, 0.15, 0.13, 0.1, 0.09, 0.07, 0.06];\nconst cumulative = weights.reduce((acc, w, i) => {\n  acc.push((acc[i - 1] || 0) + w);\n  return acc;\n}, []);\n\nconst checkouts = [];\nfor (let i = 0; i < 1200; i++) {\n  const r = random();\n  checkouts.push(genres[cumulative.findIndex((c) => r <= c)]);\n}\n\nconst counts = {};\ngenres.forEach((genre) => (counts[genre] = 0));\ncheckouts.forEach((genre) => (counts[genre] += 1));\n\nconst sorted = genres\n  .map((genre) => ({ genre, count: counts[genre] }))\n  .sort((a, b) => b.count - a.count);\n\nconst categories = sorted.map((d) => d.genre);\nconst values = sorted.map((d) => d.count);\nconst total = values.reduce((sum, v) => sum + v, 0);\nconst mean = total / values.length;\nconst leader = sorted[0];\nconst trailer = sorted[sorted.length - 1];\nconst leadRatio = (leader.count / trailer.count).toFixed(1);\n\n// --- Chart -----------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"column\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    spacingRight: 25,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: t.palette,\n  title: {\n    text: \"count-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  subtitle: {\n    text: `${leader.genre} leads with ${leader.count} checkouts — ${leadRatio}× ${trailer.genre}'s ${trailer.count}`,\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: { text: \"Checkouts\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotLines: [\n      {\n        value: mean,\n        color: t.inkSoft,\n        dashStyle: \"ShortDash\",\n        width: 1.5,\n        zIndex: 5,\n        label: {\n          text: `Mean: ${mean.toFixed(0)}`,\n          align: \"right\",\n          x: -10,\n          style: { color: t.inkSoft, fontSize: \"12px\" },\n        },\n      },\n    ],\n  },\n  legend: { enabled: false },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      borderWidth: 0,\n      borderRadius: 4,\n      colorByPoint: true,\n      dataLabels: {\n        enabled: true,\n        crop: false,\n        overflow: \"allow\",\n        color: t.ink,\n        style: { fontSize: \"14px\", fontWeight: \"500\", textOutline: \"none\" },\n        formatter: function () {\n          return `${this.y} (${((this.y / total) * 100).toFixed(0)}%)`;\n        },\n      },\n    },\n  },\n  series: [{ name: \"Checkouts\", data: values }],\n});\n"}