Create an interactive 2D graph with MathJax support using JSXGraph library

HTML

<!-- Include JSXGraph -->
<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<!-- Include MathJax -->
<script defer src="https://cdn.jsdelivr.net/npm/mathjax@4/tex-svg.js"></script>

<!-- JSXGraph div -->
<div id="jxgbox" class="jxgbox" style="max-width:800px; aspect-ratio:1/1">
</div>

JavaScript

// Enable MathJax for all JSXGraph elements!
// Use '\\( ... \\)' or '\\[ ... \\]` for LaTeX math text
JXG.Options.text.useMathJax = true;

const board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5, 5, 5, -5],
    axis: true,
    pan: { enabled: true },      // Disable pan for 3D view
    zoom: { enabled: true }      // Disable zoom for 3D view
});

board.create("arrow", [[0,0],[3,3]],{opacity:0.1});

// Uncomment for 3D view
/*
var box = [-4, 4];
var view = board.create("view3d",
  [
    [-5, -3],       // Lower left corner of 3D view in 2D board
    [8, 8],         // Size of 3D view in 2D board
    [box, box, box] // 3D size of the 3D box
  ],
  {
    projection: "central",
    trackball: { enabled: false },
    depthOrder: { enabled: true },
    xPlaneRear: { visible: false },
    yPlaneRear: { visible: false },
    zPlaneRear: { fillOpacity: 0.2 }
  }
);
*/