{"spec_id":"bar-basic","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-basic: Basic Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-08-20\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\nconst departments = [\n  \"Engineering\",\n  \"Sales\",\n  \"Support\",\n  \"Marketing\",\n  \"Operations\",\n  \"Finance\",\n];\nconst headcount = [186, 142, 97, 68, 54, 31];\n\n// Emphasize the top-ranked department with a brightened shade of the brand\n// green — a deliberate hierarchy device beyond plain bar order, derived\n// deterministically so it stays identical across both themes.\nconst leadColor = Highcharts.color(t.palette[0]).brighten(0.25).get();\nconst data = headcount.map((value, i) => ({\n  y: value,\n  color: i === 0 ? leadColor : t.palette[0],\n}));\n\n// --- Chart -------------------------------------------------------------------\nHighcharts.chart(\"container\", {\n  chart: {\n    type: \"column\",\n    backgroundColor: \"transparent\",\n    animation: false,\n    style: { fontFamily: \"inherit\" },\n  },\n  credits: { enabled: false },\n  colors: [t.palette[0]],\n  title: {\n    text: \"bar-basic · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: departments,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: { text: null },\n    maxPadding: 0.01,\n  },\n  yAxis: {\n    title: {\n      text: \"Headcount\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    min: 0,\n  },\n  legend: { enabled: false },\n  tooltip: {\n    enabled: true,\n    backgroundColor: t.elevatedBg,\n    borderColor: t.grid,\n    borderRadius: 6,\n    shadow: false,\n    style: { color: t.ink, fontSize: \"14px\" },\n    headerFormat: \"\",\n    pointFormat: \"<b>{point.category}</b><br/>{series.name}: <b>{point.y}</b>\",\n  },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      borderWidth: 0,\n      borderRadius: 2,\n      pointPadding: 0.12,\n      groupPadding: 0.08,\n      dataLabels: {\n        enabled: true,\n        style: {\n          color: t.inkSoft,\n          fontSize: \"14px\",\n          fontWeight: \"500\",\n          textOutline: \"none\",\n        },\n      },\n    },\n  },\n  series: [{ name: \"Headcount\", data }],\n});\n"}