{"spec_id":"line-multi","library":"muix","language":"javascript","code":"// anyplot.ai\n// line-multi: Multi-Line Comparison Plot\n// Library: muix 7.29.1 | JavaScript 22.23.1\n// Quality: 83/100 | Created: 2026-08-05\n//# anyplot-orientation: landscape\n// anyplot.ai\n// line-multi: Multi-Line Comparison Plot\n// Library: MUI X Charts | React | Node 22\n// License: @mui/x-charts — MIT (community). Pro/Premium are out of scope.\n// Quality: pending | Created: 2026-08-05\n\nimport { LineChart } from \"@mui/x-charts/LineChart\";\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;\nconst sz = window.ANYPLOT_SIZE;\n\n// Average monthly temperature (°C) across four cities spanning distinct\n// climate zones — the crossover between Singapore and Dubai each spring/\n// autumn is the reason a multi-line comparison earns its place here.\nconst months = [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"];\n\nconst reykjavik = [0, 1, 2, 5, 8, 11, 13, 13, 10, 6, 3, 1];\nconst berlin = [1, 2, 6, 11, 16, 19, 21, 21, 16, 11, 6, 2];\nconst dubai = [19, 20, 24, 29, 34, 36, 38, 38, 35, 31, 25, 21];\nconst singapore = [27, 27, 28, 28, 28, 28, 28, 28, 27, 27, 27, 27];\n\nexport default function Chart() {\n  return (\n    <Box sx={{ position: \"relative\", width: sz.width, height: sz.height }}>\n      <Typography\n        sx={{\n          position: \"absolute\",\n          top: 14,\n          left: 0,\n          right: 0,\n          textAlign: \"center\",\n          color: t.ink,\n          fontSize: 22,\n          fontWeight: 600,\n          zIndex: 1,\n          pointerEvents: \"none\",\n        }}\n      >\n        line-multi · javascript · muix · anyplot.ai\n      </Typography>\n\n      <LineChart\n        width={sz.width}\n        height={sz.height}\n        skipAnimation\n        margin={{ top: 100, bottom: 130, left: 100, right: 50 }}\n        colors={[t.palette[0], t.palette[1], t.palette[2], t.palette[3]]}\n        grid={{ horizontal: true }}\n        sx={{\n          \"& .MuiLineElement-root\": { strokeWidth: 3.5 },\n          \"& .MuiMarkElement-root\": { strokeWidth: 2.5 },\n        }}\n        xAxis={[\n          {\n            id: \"month\",\n            scaleType: \"point\",\n            data: months,\n            label: \"Month\",\n            tickLabelStyle: { fontSize: 14, fill: t.inkSoft },\n            labelStyle: { fontSize: 16, fill: t.ink },\n          },\n        ]}\n        yAxis={[\n          {\n            id: \"temp\",\n            label: \"Average Temperature (°C)\",\n            valueFormatter: (v) => `${v}°`,\n            // tickFontSize only feeds the axis-label offset calculation (not the\n            // rendered tick size, which tickLabelStyle.fontSize controls below) —\n            // bumped so the rotated label clears our wide \"38°\"-style ticks.\n            tickFontSize: 40,\n            tickLabelStyle: { fontSize: 14, fill: t.inkSoft },\n            labelStyle: { fontSize: 16, fill: t.ink },\n          },\n        ]}\n        series={[\n          {\n            id: \"reykjavik\",\n            data: reykjavik,\n            label: \"Reykjavik\",\n            curve: \"monotoneX\",\n            showMark: true,\n            xAxisId: \"month\",\n            yAxisId: \"temp\",\n          },\n          {\n            id: \"berlin\",\n            data: berlin,\n            label: \"Berlin\",\n            curve: \"monotoneX\",\n            showMark: true,\n            xAxisId: \"month\",\n            yAxisId: \"temp\",\n          },\n          {\n            id: \"dubai\",\n            data: dubai,\n            label: \"Dubai\",\n            curve: \"monotoneX\",\n            showMark: true,\n            xAxisId: \"month\",\n            yAxisId: \"temp\",\n          },\n          {\n            id: \"singapore\",\n            data: singapore,\n            label: \"Singapore\",\n            curve: \"monotoneX\",\n            showMark: true,\n            xAxisId: \"month\",\n            yAxisId: \"temp\",\n          },\n        ]}\n        slotProps={{\n          legend: {\n            position: { vertical: \"bottom\", horizontal: \"middle\" },\n            direction: \"row\",\n            itemMarkWidth: 20,\n            itemMarkHeight: 4,\n            markGap: 8,\n            itemGap: 28,\n            labelStyle: { fontSize: 14, fill: t.inkSoft },\n          },\n        }}\n      >\n        {/* Dubai/Singapore trade seasonal lead twice a year — mark both crossovers. */}\n        <ChartsReferenceLine\n          x=\"Apr\"\n          axisId=\"month\"\n          label=\"crossover\"\n          labelAlign=\"start\"\n          spacing={{ x: 6, y: 4 }}\n          labelStyle={{ fontSize: 12, fill: t.inkSoft }}\n          lineStyle={{ stroke: t.inkSoft, strokeDasharray: \"4 4\", strokeWidth: 1.5 }}\n        />\n        <ChartsReferenceLine\n          x=\"Nov\"\n          axisId=\"month\"\n          label=\"crossover\"\n          labelAlign=\"start\"\n          spacing={{ x: 6, y: 4 }}\n          labelStyle={{ fontSize: 12, fill: t.inkSoft }}\n          lineStyle={{ stroke: t.inkSoft, strokeDasharray: \"4 4\", strokeWidth: 1.5 }}\n        />\n      </LineChart>\n    </Box>\n  );\n}\n"}