{"spec_id":"bar-grouped","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-grouped: Grouped Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.1\n// Quality: 87/100 | Created: 2026-08-05\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Quarterly revenue ($M) by product line across sales regions.\nconst regions = [\n  \"North America\",\n  \"Europe\",\n  \"Asia Pacific\",\n  \"Latin America\",\n  \"Middle East & Africa\",\n  \"Rest of World\",\n];\nconst productLines = [\"Software\", \"Hardware\", \"Services\"];\nconst revenueByProduct = [\n  [42.5, 31.2, 27.8, 12.4, 9.6, 5.3], // Software\n  [28.1, 24.6, 33.5, 9.8, 7.2, 4.1], // Hardware\n  [19.7, 22.3, 15.9, 7.1, 5.8, 3.2], // Services\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,\n  title: {\n    text: \"bar-grouped · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: regions,\n    title: {\n      text: \"Region\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  yAxis: {\n    title: {\n      text: \"Revenue ($M)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false, groupPadding: 0.06, pointPadding: 0.03 },\n    column: {\n      borderWidth: 0,\n      borderRadius: 3,\n      dataLabels: {\n        enabled: true,\n        format: \"{y:.0f}\",\n        style: {\n          color: t.inkSoft,\n          fontSize: \"11px\",\n          fontWeight: \"500\",\n          textOutline: \"none\",\n        },\n      },\n    },\n  },\n  series: productLines.map((name, i) => ({\n    name,\n    data: revenueByProduct[i],\n  })),\n});\n"}