{"spec_id":"line-yield-curve","library":"muix","language":"javascript","code":"// anyplot.ai\n// line-yield-curve: Yield Curve (Interest Rate Term Structure)\n// Library: muix 7.29.1 | JavaScript 22.22.3\n// Quality: 88/100 | Created: 2026-06-10\n//# anyplot-orientation: landscape\n// anyplot.ai\n// line-yield-curve: Yield Curve (Interest Rate Term Structure)\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-06-10\n\nimport { LineChart } from \"@mui/x-charts/LineChart\";\nimport { ChartsReferenceLine } from \"@mui/x-charts/ChartsReferenceLine\";\n\nconst t = window.ANYPLOT_TOKENS;\n\n// Maturity axis — numeric years for log-scale spacing, labels for ticks\nconst maturityYears = [0.083, 0.25, 0.5, 1, 2, 3, 5, 7, 10, 20, 30];\nconst maturityLabels = [\"1M\", \"3M\", \"6M\", \"1Y\", \"2Y\", \"3Y\", \"5Y\", \"7Y\", \"10Y\", \"20Y\", \"30Y\"];\n\n// U.S. Treasury par yields (%) — three snapshots showing term structure evolution\nconst jan2021 = [0.05, 0.04, 0.06, 0.09, 0.12, 0.22, 0.59, 0.96, 1.08, 1.6, 1.82]; // Normal: COVID-era low rates\nconst oct2022 = [3.28, 3.82, 4.25, 4.55, 4.63, 4.58, 4.35, 4.25, 4.05, 4.18, 4.1]; // Near-flat: Fed hiking cycle\nconst jul2023 = [5.51, 5.54, 5.54, 5.36, 4.87, 4.57, 4.28, 4.22, 3.97, 4.27, 4.05]; // Inverted: recession signal\n\nexport default function Chart() {\n  return (\n    <div style={{ width: \"100%\", height: \"100%\", position: \"relative\" }}>\n      {/* Title rendered in the chart's top margin space */}\n      <div\n        style={{\n          position: \"absolute\",\n          top: 14,\n          left: 0,\n          right: 0,\n          textAlign: \"center\",\n          zIndex: 1,\n          fontSize: 19,\n          fontWeight: 500,\n          color: t.ink,\n          pointerEvents: \"none\",\n          fontFamily: \"'Roboto', 'Helvetica', 'Arial', sans-serif\",\n        }}\n      >\n        U.S. Treasury Yield Curves · line-yield-curve · javascript · muix · anyplot.ai\n      </div>\n\n      <LineChart\n        width={window.ANYPLOT_SIZE.width}\n        height={window.ANYPLOT_SIZE.height}\n        skipAnimation\n        colors={[t.palette[0], t.palette[1], t.palette[4]]}\n        xAxis={[\n          {\n            scaleType: \"log\",\n            data: maturityYears,\n            valueFormatter: (v) => {\n              const idx = maturityYears.findIndex((y) => Math.abs(y - v) < 0.005);\n              return idx >= 0 ? maturityLabels[idx] : \"\";\n            },\n            label: \"Maturity\",\n          },\n        ]}\n        yAxis={[\n          {\n            label: \"Yield (%)\",\n            min: 0,\n            max: 6.5,\n            tickMinStep: 1,\n            valueFormatter: (v) => `${v}%`,\n          },\n        ]}\n        series={[\n          {\n            data: jan2021,\n            label: \"Jan 2021 (Normal)\",\n            showMark: true,\n            curve: \"catmullRom\",\n          },\n          {\n            data: oct2022,\n            label: \"Oct 2022 (Flat)\",\n            showMark: true,\n            curve: \"catmullRom\",\n          },\n          {\n            data: jul2023,\n            label: \"Jul 2023 (Inverted)\",\n            showMark: true,\n            curve: \"catmullRom\",\n          },\n        ]}\n        sx={{\n          \"& .MuiChartsAxis-label\": {\n            fontSize: \"16px !important\",\n          },\n          \"& .MuiChartsAxis-left .MuiChartsAxis-label\": {\n            fontSize: \"13px !important\",\n          },\n          \"& .MuiChartsAxis-tickLabel\": {\n            fontSize: \"14px !important\",\n          },\n          \"& .MuiChartsLegend-label\": {\n            fontSize: \"15px !important\",\n          },\n          \"& .MuiLineElement-root\": {\n            strokeWidth: \"3px\",\n          },\n        }}\n        slotProps={{\n          legend: {\n            direction: \"row\",\n            position: { vertical: \"bottom\", horizontal: \"middle\" },\n          },\n        }}\n        margin={{ top: 60, right: 60, bottom: 80, left: 110 }}\n      >\n        <ChartsReferenceLine\n          x={1}\n          label=\"Inverted beyond 1Y →\"\n          labelAlign=\"start\"\n          lineStyle={{\n            stroke: t.palette[4],\n            strokeDasharray: \"6 4\",\n            strokeWidth: 1.5,\n            strokeOpacity: 0.55,\n          }}\n          labelStyle={{\n            fill: t.palette[4],\n            fontSize: 13,\n          }}\n        />\n      </LineChart>\n    </div>\n  );\n}\n"}