{"spec_id":"bar-stacked-labeled","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-stacked-labeled: Stacked Bar Chart with Total Labels\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 94/100 | Created: 2026-08-26\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ---------------------------------------\n// Quarterly revenue by product line, in $M.\nconst quarters = [\"Q1\", \"Q2\", \"Q3\", \"Q4\"];\nconst hardware = [41, 38, 44, 51];\nconst software = [27, 32, 35, 39];\nconst services = [18, 21, 19, 24];\nconst support = [11, 14, 13, 16];\n\n// The strongest quarter (highest stacked total) anchors the storytelling\n// emphasis below — a soft highlight band plus a bolder, brand-green total\n// label draw the eye straight to it.\nconst peakIndex = quarters.length - 1;\nconst peakBand = Highcharts.color(t.palette[0]).setOpacity(0.08).get();\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-stacked-labeled · javascript · highcharts · anyplot.ai\",\n    style: { color: t.ink, fontSize: \"27px\", fontWeight: \"700\" },\n  },\n  subtitle: {\n    text:\n      \"Q\" +\n      quarters.length +\n      \" leads at $\" +\n      hardware[peakIndex] +\n      \"M in Hardware — total revenue climbs every quarter\",\n    style: { color: t.inkSoft, fontSize: \"14px\" },\n  },\n  xAxis: {\n    categories: quarters,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    plotBands: [\n      {\n        from: peakIndex - 0.5,\n        to: peakIndex + 0.5,\n        color: peakBand,\n      },\n    ],\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    endOnTick: false,\n    maxPadding: 0.14,\n    stackLabels: {\n      enabled: true,\n      useHTML: true,\n      style: { textOutline: \"none\" },\n      formatter: function () {\n        const isPeak = this.x === peakIndex;\n        const color = isPeak ? t.palette[0] : t.ink;\n        const fontSize = isPeak ? \"19px\" : \"17px\";\n        return (\n          '<span style=\"color:' +\n          color +\n          \";font-size:\" +\n          fontSize +\n          ';font-weight:700;\">$' +\n          this.total +\n          \"M</span>\"\n        );\n      },\n    },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      borderWidth: 0,\n      borderRadius: 2,\n      stacking: \"normal\",\n      pointPadding: 0.08,\n      groupPadding: 0.14,\n    },\n  },\n  series: [\n    { name: \"Hardware\", data: hardware },\n    { name: \"Software\", data: software },\n    { name: \"Services\", data: services },\n    { name: \"Support\", data: support },\n  ],\n});\n"}