{"spec_id":"bar-stacked-labeled","library":"muix","language":"javascript","code":"// anyplot.ai\n// bar-stacked-labeled: Stacked Bar Chart with Total Labels\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 88/100 | Created: 2026-08-26\nimport { BarChart } from \"@mui/x-charts/BarChart\";\nimport { useXScale, useYScale } from \"@mui/x-charts/hooks\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic) ----------------------------------------\n// Project budget breakdown by phase, three stacked cost types (Imprint palette 1-3).\nconst phases = [\"Planning\", \"Design\", \"Development\", \"Testing\", \"Deployment\"];\nconst costTypes = [\"Labor\", \"Materials\", \"Equipment\"];\nconst labor = [18, 32, 58, 34, 22];\nconst materials = [6, 14, 20, 10, 8];\nconst equipment = [4, 10, 16, 6, 12];\nconst totals = phases.map((_, i) => labor[i] + materials[i] + equipment[i]);\nconst maxTotal = Math.max(...totals);\n\nconst TITLE = \"bar-stacked-labeled · javascript · muix · anyplot.ai\";\nconst TITLE_H = 56;\n\n// --- Total labels (custom overlay, positioned via chart scales) -------------\nfunction TotalLabels() {\n  const xScale = useXScale();\n  const yScale = useYScale();\n  return (\n    <g>\n      {phases.map((phase, i) => (\n        <text\n          key={phase}\n          x={xScale(phase) + xScale.bandwidth() / 2}\n          y={yScale(totals[i]) - 16}\n          textAnchor=\"middle\"\n          fontSize={20}\n          fontWeight={700}\n          fill={t.ink}\n        >\n          {`$${totals[i]}k`}\n        </text>\n      ))}\n    </g>\n  );\n}\n\n// --- Chart (default-exported component — the harness mounts it) -------------\nexport default function Chart() {\n  const { width, height } = window.ANYPLOT_SIZE;\n\n  return (\n    <Box\n      sx={{\n        width,\n        height,\n        bgcolor: t.pageBg,\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      <Box\n        sx={{\n          height: TITLE_H,\n          display: \"flex\",\n          alignItems: \"center\",\n          px: \"40px\",\n          pt: \"10px\",\n        }}\n      >\n        <Typography\n          sx={{\n            color: t.ink,\n            fontSize: \"22px\",\n            fontWeight: 600,\n            letterSpacing: \"0.02em\",\n            lineHeight: 1,\n          }}\n        >\n          {TITLE}\n        </Typography>\n      </Box>\n\n      <BarChart\n        width={width}\n        height={height - TITLE_H}\n        colors={t.palette}\n        skipAnimation\n        borderRadius={4}\n        grid={{ horizontal: true }}\n        xAxis={[\n          {\n            scaleType: \"band\",\n            data: phases,\n            label: \"Project Phase\",\n          },\n        ]}\n        yAxis={[\n          {\n            label: \"Cost ($ thousands)\",\n            max: Math.ceil((maxTotal * 1.18) / 10) * 10,\n            tickFontSize: 14,\n            labelFontSize: 16,\n            tickSize: 8,\n          },\n        ]}\n        series={[\n          { data: labor, label: costTypes[0], stack: \"total\" },\n          { data: materials, label: costTypes[1], stack: \"total\" },\n          { data: equipment, label: costTypes[2], stack: \"total\" },\n        ]}\n        margin={{ top: 30, right: 32, bottom: 90, left: 90 }}\n        sx={{\n          \"& .MuiChartsAxis-tickLabel\": { fontSize: \"14px\" },\n          \"& .MuiChartsAxis-label\": { fontSize: \"16px\", fontWeight: 600 },\n          \"& .MuiChartsLegend-label\": { fontSize: \"15px\" },\n          \"& .MuiChartsGrid-line\": { stroke: t.grid, strokeWidth: 1 },\n          \"& .MuiBarElement-root\": { stroke: t.pageBg, strokeWidth: 1.5 },\n        }}\n        slotProps={{\n          legend: { position: { vertical: \"bottom\", horizontal: \"middle\" } },\n        }}\n      >\n        <TotalLabels />\n      </BarChart>\n    </Box>\n  );\n}\n"}