{"spec_id":"bar-basic","library":"muix","language":"javascript","code":"// anyplot.ai\n// bar-basic: Basic Bar Chart\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 87/100 | Created: 2026-08-20\nimport { BarChart } from \"@mui/x-charts/BarChart\";\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// Annual coffee consumption per capita — top consuming countries (kg/person/year)\nconst countries = [\"Finland\", \"Norway\", \"Iceland\", \"Denmark\", \"Netherlands\", \"Sweden\", \"Switzerland\"];\nconst kgPerCapita = [12.0, 9.9, 9.0, 8.7, 8.4, 8.2, 7.9];\n\nconst dataset = countries.map((country, i) => ({ country, kgPerCapita: kgPerCapita[i] }));\n\nconst TITLE_HEIGHT = 60;\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 sx={{ width, height, display: \"flex\", flexDirection: \"column\", paddingTop: \"20px\" }}>\n      <Typography\n        sx={{ color: t.ink, fontSize: 22, fontWeight: 500, textAlign: \"center\", lineHeight: 1.2 }}\n      >\n        bar-basic · javascript · muix · anyplot.ai\n      </Typography>\n      <BarChart\n        width={width}\n        height={height - TITLE_HEIGHT}\n        dataset={dataset}\n        colors={[t.palette[0]]}\n        skipAnimation\n        barLabel=\"value\"\n        xAxis={[{ scaleType: \"band\", dataKey: \"country\", label: \"Country\" }]}\n        yAxis={[{ label: \"Coffee Consumption (kg per capita/year)\" }]}\n        series={[{ dataKey: \"kgPerCapita\", label: \"Coffee consumption\" }]}\n        grid={{ horizontal: true }}\n        margin={{ top: 32, right: 32, bottom: 64, left: 88 }}\n        slotProps={{ legend: { hidden: true } }}\n        sx={{\n          \"& .MuiChartsAxis-tickLabel\": { fontSize: \"14px\" },\n          \"& .MuiChartsAxis-label\": { fontSize: \"16px\" },\n          \"& .MuiBarLabel-root\": { fontSize: \"14px\", fill: t.ink },\n        }}\n      />\n    </Box>\n  );\n}\n"}