{"spec_id":"bar-stacked-percent","library":"highcharts","language":"javascript","code":"// anyplot.ai\n// bar-stacked-percent: 100% Stacked Bar Chart\n// Library: highcharts 12.6.0 | JavaScript 22.23.2\n// Quality: 89/100 | Created: 2026-08-18\n\n//# anyplot-orientation: landscape\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Cloud infrastructure market share by provider, 2019-2024 (illustrative\n// quarterly revenue share, USD billions) — normalized to 100% per year.\nconst years = [\"2019\", \"2020\", \"2021\", \"2022\", \"2023\", \"2024\"];\nconst aws = [47, 45, 40, 34, 32, 31];\nconst azure = [22, 24, 27, 26, 25, 24];\nconst gcp = [8, 9, 10, 11, 11, 12];\nconst other = [23, 22, 23, 29, 32, 33];\n\n// Segments below this share (%) skip their data label to avoid crowding —\n// Google Cloud's ~8-12% band is the thinnest and stays label-free.\nconst MIN_LABEL_SHARE = 13;\n\n// --- Chart -------------------------------------------------------------------\nconst title = \"bar-stacked-percent · javascript · highcharts · anyplot.ai\";\n\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: title,\n    style: { color: t.ink, fontSize: \"22px\", fontWeight: \"600\" },\n  },\n  xAxis: {\n    categories: years,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    labels: { style: { color: t.inkSoft, fontSize: \"14px\" } },\n    title: { text: \"Year\", style: { color: t.inkSoft, fontSize: \"16px\" } },\n  },\n  yAxis: {\n    min: 0,\n    max: 100,\n    tickInterval: 20,\n    lineColor: t.inkSoft,\n    tickColor: t.inkSoft,\n    title: {\n      text: \"Market Share (%)\",\n      style: { color: t.inkSoft, fontSize: \"16px\" },\n    },\n    gridLineColor: t.grid,\n    labels: {\n      format: \"{value}%\",\n      style: { color: t.inkSoft, fontSize: \"14px\" },\n    },\n  },\n  legend: {\n    itemStyle: { color: t.inkSoft, fontSize: \"14px\" },\n    itemHoverStyle: { color: t.ink },\n  },\n  tooltip: {\n    enabled: true,\n    shared: true,\n    backgroundColor: t.elevatedBg,\n    borderColor: t.inkSoft,\n    style: { color: t.ink, fontSize: \"13px\" },\n    headerFormat: '<span style=\"font-weight:600\">{point.key}</span><br/>',\n    pointFormat:\n      '<span style=\"color:{point.color}\">●</span> {series.name}: <b>{point.percentage:.0f}%</b> ({point.y})<br/>',\n  },\n  plotOptions: {\n    series: { animation: false },\n    column: {\n      stacking: \"percent\",\n      borderWidth: 2,\n      borderColor: t.pageBg,\n      borderRadius: 3,\n      pointPadding: 0.08,\n      groupPadding: 0.12,\n      dataLabels: {\n        enabled: true,\n        formatter: function () {\n          return this.percentage >= MIN_LABEL_SHARE ? Math.round(this.percentage) + \"%\" : null;\n        },\n        style: {\n          color: \"#FFFFFF\",\n          fontSize: \"13px\",\n          fontWeight: \"600\",\n          textOutline: \"1px rgba(26, 26, 23, 0.55)\",\n        },\n      },\n    },\n  },\n  series: [\n    { name: \"AWS\", data: aws, color: t.palette[0] },\n    { name: \"Microsoft Azure\", data: azure, color: t.palette[1] },\n    { name: \"Google Cloud\", data: gcp, color: t.palette[2] },\n    { name: \"Other Providers\", data: other, color: t.palette[3] },\n  ],\n});\n"}