diff --git a/plots/slope-basic/implementations/javascript/muix.tsx b/plots/slope-basic/implementations/javascript/muix.tsx
new file mode 100644
index 0000000000..05e4ccb069
--- /dev/null
+++ b/plots/slope-basic/implementations/javascript/muix.tsx
@@ -0,0 +1,206 @@
+// anyplot.ai
+// slope-basic: Basic Slope Chart (Slopegraph)
+// Library: muix 7.29.1 | JavaScript 22.23.1
+// Quality: 94/100 | Updated: 2026-07-26
+
+import { LineChart } from "@mui/x-charts/LineChart";
+import { useXScale, useYScale } from "@mui/x-charts/hooks";
+
+const t = window.ANYPLOT_TOKENS;
+
+// --- Data: employee satisfaction score (0-100) by department, 2023 vs 2025 -
+const PERIODS = ["2023", "2025"];
+const departments = [
+ { name: "Customer Support", start: 52, end: 46 },
+ { name: "Sales", start: 57, end: 51 },
+ { name: "Design", start: 47, end: 55 },
+ { name: "Marketing", start: 65, end: 60 },
+ { name: "Finance", start: 61, end: 68 },
+ { name: "Product", start: 79, end: 72 },
+ { name: "HR", start: 70, end: 77 },
+ { name: "Operations", start: 74, end: 82 },
+ { name: "Engineering", start: 83, end: 90 },
+];
+
+// Direction semantics — profit/up/gain -> brand green, loss/down -> matte red
+const IMPROVED = t.palette[0];
+const DECLINED = t.palette[4];
+
+// Slugified id (no spaces) so the per-series CSS class selectors below stay valid.
+const slug = (name) => name.replace(/\s+/g, "-");
+
+const series = departments.map((d) => ({
+ id: slug(d.name),
+ data: [d.start, d.end],
+ label: d.name,
+ color: d.end >= d.start ? IMPROVED : DECLINED,
+ showMark: true,
+ curve: "linear",
+}));
+
+// The biggest riser and biggest decliner get a bolder stroke + a delta
+// callout — a focal point so the eye isn't spread evenly across all 9
+// equally-weighted lines.
+const biggestRiser = departments.reduce((best, d) => (d.end - d.start > best.end - best.start ? d : best));
+const biggestDecliner = departments.reduce((best, d) => (d.end - d.start < best.end - best.start ? d : best));
+
+// Direct endpoint labels — name + value on BOTH columns so a reader never
+// has to trace color/slope back to the left label to identify a department.
+function EndpointLabels() {
+ const xScale = useXScale();
+ const yScale = useYScale();
+ const xStart = xScale("2023");
+ const xEnd = xScale("2025");
+
+ return (
+
+ {departments.map((d) => (
+
+
+ {d.name} · {d.start}
+
+
+ {d.end} · {d.name}
+
+
+ ))}
+
+ );
+}
+
+// Delta callouts for the single biggest riser and biggest decliner — a small
+// chip near the line's midpoint so the standout changes read at a glance.
+function DeltaAnnotations() {
+ const xScale = useXScale();
+ const yScale = useYScale();
+ const xMid = (xScale("2023") + xScale("2025")) / 2;
+
+ const callouts = [
+ { d: biggestRiser, color: IMPROVED, dy: -22 },
+ { d: biggestDecliner, color: DECLINED, dy: 22 },
+ ].map(({ d, color, dy }) => {
+ const delta = d.end - d.start;
+ return {
+ key: d.name,
+ label: `${delta > 0 ? "+" : ""}${delta}`,
+ color,
+ x: xMid,
+ y: yScale((d.start + d.end) / 2) + dy,
+ };
+ });
+
+ return (
+
+ {callouts.map((c) => (
+
+
+
+ {c.label}
+
+
+ ))}
+
+ );
+}
+
+const TITLE = "Employee Satisfaction by Department · slope-basic · javascript · muix · anyplot.ai";
+const TITLE_FONT_SIZE = Math.round(22 * Math.min(1, 67 / TITLE.length));
+const TITLE_H = 70;
+
+export default function Chart() {
+ const { width, height } = window.ANYPLOT_SIZE;
+
+ return (
+
+
+
+ {TITLE}
+
+
+
+
+ Improved
+
+
+
+ Declined
+
+
+
+
+
false,
+ },
+ ]}
+ series={series}
+ slotProps={{ legend: { hidden: true } }}
+ sx={{
+ "& .MuiLineElement-root": { strokeWidth: 3 },
+ "& .MuiMarkElement-root": { strokeWidth: 2 },
+ [`& .MuiLineElement-series-${slug(biggestRiser.name)}`]: { strokeWidth: 5 },
+ [`& .MuiLineElement-series-${slug(biggestDecliner.name)}`]: { strokeWidth: 5 },
+ [`& .MuiMarkElement-series-${slug(biggestRiser.name)}`]: { strokeWidth: 3 },
+ [`& .MuiMarkElement-series-${slug(biggestDecliner.name)}`]: { strokeWidth: 3 },
+ }}
+ >
+
+
+
+