{"spec_id":"bar-stacked-labeled","library":"echarts","language":"javascript","code":"// anyplot.ai\n// bar-stacked-labeled: Stacked Bar Chart with Total Labels\n// Library: echarts 6.1.0 | JavaScript 22.23.2\n// Quality: 92/100 | Created: 2026-08-26\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\nconst quarters = [\"2023 Q1\", \"2023 Q2\", \"2023 Q3\", \"2023 Q4\", \"2024 Q1\", \"2024 Q2\"];\nconst services = [\"Compute\", \"Storage\", \"Networking\", \"Database\"];\nconst spendByService = {\n  Compute: [180, 195, 210, 225, 240, 258],\n  Storage: [90, 95, 102, 110, 118, 125],\n  Networking: [45, 48, 52, 58, 62, 67],\n  Database: [65, 70, 75, 82, 88, 95],\n};\nconst totals = quarters.map((_, i) =>\n  services.reduce((sum, service) => sum + spendByService[service][i], 0)\n);\nconst yAxisMax = Math.ceil((Math.max(...totals) * 1.15) / 50) * 50;\n\nconst title = \"Cloud Spend · bar-stacked-labeled · javascript · echarts · anyplot.ai\";\nconst titleFontSize = Math.round(22 * Math.min(1, 67 / title.length));\n\n// --- Init ---------------------------------------------------------------------\nconst chart = echarts.init(document.getElementById(\"container\"));\n\n// --- Option ---------------------------------------------------------------------\nchart.setOption({\n  animation: false,\n  color: t.palette,\n  backgroundColor: \"transparent\",\n  title: {\n    text: title,\n    left: \"center\",\n    top: 20,\n    textStyle: { color: t.ink, fontSize: titleFontSize, fontWeight: 500 },\n  },\n  legend: {\n    data: services,\n    top: 76,\n    textStyle: { color: t.ink, fontSize: 16 },\n    itemWidth: 18,\n    itemHeight: 14,\n  },\n  tooltip: {\n    trigger: \"axis\",\n    axisPointer: { type: \"shadow\" },\n    valueFormatter: (value) => `$${value}K`,\n  },\n  grid: { left: 110, right: 60, top: 150, bottom: 70, containLabel: false },\n  xAxis: {\n    type: \"category\",\n    data: quarters,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { lineStyle: { color: t.inkSoft } },\n    axisTick: { show: false },\n    splitLine: { show: false },\n  },\n  yAxis: {\n    type: \"value\",\n    name: \"Spend ($K)\",\n    nameLocation: \"middle\",\n    nameGap: 70,\n    nameTextStyle: { color: t.ink, fontSize: 18 },\n    max: yAxisMax,\n    axisLabel: { color: t.inkSoft, fontSize: 14 },\n    axisLine: { show: false },\n    splitLine: { lineStyle: { color: t.grid } },\n  },\n  series: [\n    ...services.map((service) => ({\n      name: service,\n      type: \"bar\",\n      stack: \"spend\",\n      barWidth: \"56%\",\n      data: spendByService[service],\n    })),\n    {\n      name: \"Total\",\n      type: \"bar\",\n      stack: \"spend\",\n      data: totals.map((_, i) =>\n        i === totals.length - 1\n          ? { value: 0, label: { fontSize: 23, color: t.palette[0] } }\n          : 0\n      ),\n      itemStyle: { color: \"transparent\" },\n      silent: true,\n      tooltip: { show: false },\n      label: {\n        show: true,\n        position: \"top\",\n        distance: 14,\n        color: t.ink,\n        fontSize: 19,\n        fontWeight: \"bold\",\n        formatter: (params) => `$${totals[params.dataIndex]}K`,\n      },\n    },\n  ],\n});\n"}