{"spec_id":"bar-diverging","library":"muix","language":"javascript","code":"// anyplot.ai\n// bar-diverging: Diverging Bar Chart\n// Library: muix 7.29.1 | JavaScript 22.23.2\n// Quality: 91/100 | Created: 2026-08-18\nimport { BarChart } from \"@mui/x-charts/BarChart\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\nimport Box from \"@mui/material/Box\";\nimport Typography from \"@mui/material/Typography\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// --- Data (in-memory, deterministic): employee engagement survey ------------\n// Net agreement score = % agree − % disagree per statement, sorted descending\n// so the pattern (what's working vs. what isn't) reads top to bottom.\nconst statements = [\n  \"Leadership communicates clearly\",\n  \"I feel valued at work\",\n  \"Team collaboration is strong\",\n  \"My workload is manageable\",\n  \"Growth opportunities are clear\",\n  \"Compensation feels fair\",\n  \"Feedback is timely and useful\",\n  \"Meetings are a good use of time\",\n  \"Tools I use are reliable\",\n  \"Change is managed effectively\",\n];\nconst netScores = [68, 52, 41, 22, 9, -8, -19, -34, -41, -55];\n\n// Split into two series sharing one stack: MUI X's default `stackOffset:\n// \"diverging\"` sends positive stacks right and negative stacks left of the\n// zero baseline, giving each row a single bar colored by direction.\nconst agreeScores = netScores.map((v) => (v >= 0 ? v : null));\nconst disagreeScores = netScores.map((v) => (v < 0 ? v : null));\n\nconst axisLimit =\n  Math.ceil((Math.max(...netScores.map(Math.abs)) + 10) / 10) * 10;\n\nexport default function Chart() {\n  const W = window.ANYPLOT_SIZE.width;\n  const H = window.ANYPLOT_SIZE.height;\n  const CHART_TOP = 76;\n\n  return (\n    <Box sx={{ position: \"relative\", width: W, height: H, bgcolor: t.pageBg }}>\n      <Box sx={{ position: \"absolute\", top: 22, left: 32, right: 32 }}>\n        <Typography sx={{ color: t.ink, fontSize: 22, fontWeight: 500 }}>\n          bar-diverging · javascript · muix · anyplot.ai\n        </Typography>\n      </Box>\n\n      <Box sx={{ position: \"absolute\", top: CHART_TOP, left: 0, right: 0, bottom: 0 }}>\n        <BarChart\n          width={W}\n          height={H - CHART_TOP}\n          layout=\"horizontal\"\n          skipAnimation\n          barLabel={(item) =>\n            item.value === null ? null : `${item.value > 0 ? \"+\" : \"\"}${item.value}`\n          }\n          series={[\n            {\n              id: \"agree\",\n              stackId: \"score\",\n              data: agreeScores,\n              label: \"Net agree\",\n              color: t.palette[0],\n              valueFormatter: (v) => (v === null ? \"\" : `+${v} pp`),\n            },\n            {\n              id: \"disagree\",\n              stackId: \"score\",\n              data: disagreeScores,\n              label: \"Net disagree\",\n              color: t.palette[4],\n              valueFormatter: (v) => (v === null ? \"\" : `${v} pp`),\n            },\n          ]}\n          xAxis={[\n            {\n              id: \"value\",\n              min: -axisLimit,\n              max: axisLimit,\n              label: \"Net Agreement Score (percentage points)\",\n              labelStyle: { fontSize: 16, fill: t.inkSoft },\n              tickLabelStyle: { fontSize: 14, fill: t.inkSoft },\n              valueFormatter: (v) => `${v > 0 ? \"+\" : \"\"}${v}`,\n            },\n          ]}\n          yAxis={[\n            {\n              scaleType: \"band\",\n              data: statements,\n              tickLabelStyle: { fontSize: 14, fill: t.ink },\n              disableTicks: true,\n              categoryGapRatio: 0.35,\n            },\n          ]}\n          margin={{ top: 20, right: 60, bottom: 76, left: 300 }}\n          grid={{ vertical: true }}\n          slotProps={{\n            legend: {\n              position: { vertical: \"top\", horizontal: \"right\" },\n              labelStyle: { fontSize: 14, fill: t.inkSoft },\n            },\n          }}\n          sx={{\n            \"& .MuiBarLabel-root\": {\n              fill: \"#F0EFE8\",\n              fontSize: \"14px\",\n              fontWeight: 600,\n            },\n            \"& .MuiChartsAxis-line\": { stroke: t.inkSoft },\n            \"& .MuiChartsGrid-line\": { stroke: t.grid },\n          }}\n        >\n          <ChartsReferenceLine\n            x={0}\n            axisId=\"value\"\n            lineStyle={{ stroke: t.ink, strokeWidth: 2 }}\n          />\n        </BarChart>\n      </Box>\n    </Box>\n  );\n}\n"}