{"spec_id":"bar-stacked","library":"plotly","language":"python","code":"\"\"\" anyplot.ai\nbar-stacked: Stacked Bar Chart\nLibrary: plotly 6.7.0 | Python 3.13.13\nQuality: 93/100 | Updated: 2026-05-09\n\"\"\"\n\nimport os\n\nimport plotly.graph_objects as go\n\n\n# Theme tokens\nTHEME = os.getenv(\"ANYPLOT_THEME\", \"light\")\nPAGE_BG = \"#FAF8F1\" if THEME == \"light\" else \"#1A1A17\"\nELEVATED_BG = \"#FFFDF6\" if THEME == \"light\" else \"#242420\"\nINK = \"#1A1A17\" if THEME == \"light\" else \"#F0EFE8\"\nINK_SOFT = \"#4A4A44\" if THEME == \"light\" else \"#B8B7B0\"\nGRID = \"rgba(26,26,23,0.08)\" if THEME == \"light\" else \"rgba(240,239,232,0.08)\"\nGRID_SUBTLE = \"rgba(26,26,23,0.04)\" if THEME == \"light\" else \"rgba(240,239,232,0.04)\"\n\n# Okabe-Ito palette (first series always #009E73)\nCOLORS = [\"#009E73\", \"#C475FD\", \"#4467A3\", \"#BD8233\"]\n\n# Data - Quarterly revenue by product category\nquarters = [\"Q1 2024\", \"Q2 2024\", \"Q3 2024\", \"Q4 2024\"]\ncategories = [\"Software\", \"Hardware\", \"Services\", \"Support\"]\n\n# Revenue in thousands USD for each product category\nsoftware = [120, 145, 160, 180]\nhardware = [80, 75, 90, 95]\nservices = [45, 55, 65, 75]\nsupport = [25, 30, 35, 40]\n\nall_data = [software, hardware, services, support]\n\n# Calculate totals and per-component percentages for storytelling\ntotals = [s + h + sv + sp for s, h, sv, sp in zip(software, hardware, services, support, strict=True)]\n\n# Create figure with enhanced styling\nfig = go.Figure()\n\n# Add stacked bars with custom hover templates for better storytelling\nfor category, data, color in zip(categories, all_data, COLORS, strict=True):\n    percentages = [f\"{v / total * 100:.0f}%\" for v, total in zip(data, totals, strict=True)]\n\n    custom_hover = [\n        f\"<b>{category}</b><br>\" + f\"Quarter: {q}<br>\" + f\"Revenue: ${v}K<br>\" + f\"% of Total: {pct}<extra></extra>\"\n        for q, v, pct in zip(quarters, data, percentages, strict=True)\n    ]\n\n    fig.add_trace(\n        go.Bar(\n            name=category,\n            x=quarters,\n            y=data,\n            marker=dict(color=color, line=dict(color=ELEVATED_BG, width=0.5)),\n            text=data,\n            textposition=\"inside\",\n            textfont={\"size\": 18, \"color\": \"white\"},\n            customdata=custom_hover,\n            hovertemplate=\"%{customdata}\",\n        )\n    )\n\n# Enhanced total annotations with visual emphasis\nfor idx, (quarter, total) in enumerate(zip(quarters, totals, strict=True)):\n    growth_rate = \"\"\n    if idx > 0:\n        growth = ((total - totals[idx - 1]) / totals[idx - 1]) * 100\n        growth_rate = f\"<br><span style='font-size:14px;'>+{growth:.1f}% QoQ</span>\"\n\n    fig.add_annotation(\n        x=quarter,\n        y=total + 12,\n        text=f\"<b>${total}K</b>{growth_rate}\",\n        showarrow=False,\n        font={\"size\": 20, \"color\": INK},\n        bgcolor=ELEVATED_BG,\n        bordercolor=INK_SOFT,\n        borderwidth=1,\n    )\n\n# Update layout with sophisticated design refinements\nfig.update_layout(\n    title={\n        \"text\": \"bar-stacked · plotly · anyplot.ai\",\n        \"font\": {\"size\": 28, \"color\": INK},\n        \"x\": 0.5,\n        \"xanchor\": \"center\",\n        \"y\": 0.98,\n        \"yanchor\": \"top\",\n    },\n    xaxis=dict(\n        title={\"text\": \"Quarter\", \"font\": {\"size\": 22, \"color\": INK}},\n        tickfont={\"size\": 18, \"color\": INK_SOFT},\n        showgrid=False,\n        showline=True,\n        linewidth=1.5,\n        linecolor=INK_SOFT,\n        mirror=False,\n    ),\n    yaxis=dict(\n        title={\"text\": \"Revenue (Thousands USD)\", \"font\": {\"size\": 22, \"color\": INK}},\n        tickfont={\"size\": 18, \"color\": INK_SOFT},\n        gridcolor=GRID_SUBTLE,\n        gridwidth=0.5,\n        showline=True,\n        linewidth=1.5,\n        linecolor=INK_SOFT,\n        mirror=False,\n    ),\n    barmode=\"stack\",\n    bargap=0.35,\n    bargroupgap=0.1,\n    paper_bgcolor=PAGE_BG,\n    plot_bgcolor=PAGE_BG,\n    font={\"color\": INK, \"family\": \"system-ui, -apple-system, sans-serif\"},\n    legend=dict(\n        orientation=\"v\",\n        yanchor=\"top\",\n        y=0.99,\n        xanchor=\"right\",\n        x=0.99,\n        font={\"size\": 18, \"color\": INK},\n        bgcolor=\"rgba(255,253,246,0.95)\" if THEME == \"light\" else \"rgba(36,36,32,0.95)\",\n        bordercolor=INK_SOFT,\n        borderwidth=1.5,\n    ),\n    margin={\"l\": 110, \"r\": 70, \"t\": 120, \"b\": 90},\n    width=1600,\n    height=900,\n)\n\n# Save as PNG (4800 x 2700 px)\nfig.write_image(f\"plot-{THEME}.png\", width=1600, height=900, scale=3)\n\n# Save as HTML for interactivity\nfig.write_html(f\"plot-{THEME}.html\", include_plotlyjs=\"cdn\")\n"}