{"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.23.3\n// Quality: 87/100 | Updated: 2026-10-09\n//# anyplot-orientation: landscape\n\nimport { LineChart } from \"@mui/x-charts/LineChart\";\nimport { useDrawingArea, useXScale } from \"@mui/x-charts/hooks\";\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// Approximate U.S. Treasury par yields (%) — three eras of the term structure\nconst jun1993 = [3.0, 3.1, 3.2, 3.4, 3.9, 4.4, 5.2, 5.8, 5.9, 6.6, 6.8]; // Normal: early-1990s recovery\nconst mar2000 = [5.7, 5.9, 6.1, 6.3, 6.5, 6.4, 6.3, 6.3, 6.2, 6.3, 5.9]; // Humped: dot-com peak\nconst jan2007 = [5.2, 5.2, 5.1, 5.0, 4.8, 4.7, 4.7, 4.8, 4.8, 5.0, 4.9]; // Inverted: pre-crisis\n\n// Shaded band over the maturities where the Jan 2007 short end sits above its 5Y yield\nfunction InversionBand() {\n  const xScale = useXScale();\n  const { top, height } = useDrawingArea();\n  const x0 = xScale(maturityYears[0]);\n  const x1 = xScale(5);\n  return (\n    <g pointerEvents=\"none\">\n      <rect x={x0} y={top} width={x1 - x0} height={height} fill={t.palette[4]} fillOpacity={0.1} />\n      <text x={(x0 + x1) / 2} y={top + 24} textAnchor=\"middle\" fontSize={15} fontWeight={500} fill={t.ink}>\n        Inversion: short-term yields above long-term\n      </text>\n    </g>\n  );\n}\n\nexport default function Chart() {\n  return (\n    <div style={{ width: \"100%\", height: \"100%\", position: \"relative\" }}>\n      <div\n        style={{\n          position: \"absolute\",\n          top: 14,\n          left: 0,\n          right: 0,\n          textAlign: \"center\",\n          zIndex: 1,\n          fontSize: 22,\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        grid={{ horizontal: true }}\n        colors={[t.palette[0], t.palette[1], t.palette[4]]}\n        xAxis={[\n          {\n            scaleType: \"log\",\n            data: maturityYears,\n            tickInterval: maturityYears,\n            min: 0.06,\n            max: 40,\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: 7.5,\n            tickMinStep: 1,\n            valueFormatter: (v) => `${v}%`,\n          },\n        ]}\n        series={[\n          { data: jun1993, label: \"Jun 1993 (Normal)\", showMark: true, curve: \"linear\" },\n          { data: mar2000, label: \"Mar 2000 (Humped)\", showMark: true, curve: \"linear\" },\n          { data: jan2007, label: \"Jan 2007 (Inverted)\", showMark: true, curve: \"linear\" },\n        ]}\n        sx={{\n          \"& .MuiChartsAxis-label\": { fontSize: \"16px !important\" },\n          \"& .MuiChartsAxis-left .MuiChartsAxis-label\": { transform: \"translateX(-24px)\" },\n          \"& .MuiChartsAxis-tickLabel\": { fontSize: \"14px !important\" },\n          \"& .MuiChartsLegend-label\": { fontSize: \"15px !important\" },\n          \"& .MuiChartsGrid-line\": { strokeOpacity: 0.25 },\n          \"& .MuiLineElement-root\": { strokeWidth: \"3px\" },\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        <InversionBand />\n      </LineChart>\n    </div>\n  );\n}\n"}