mathjax

use mathjax with jsxgraph in jsfiddle

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-MML-AM_CHTML"></script>
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div>

JavaScript

JXG.Options.text.display = 'html';
//JXG.Options.text.useMathJax = true;

var board = JXG.JSXGraph.initBoard('box', {
    boundingbox: [-1.5, 1.5, 1.5, -1.5],
    axis: false,
    keepaspectratio: true
});

board.addHook(function () {
    MathJax.Hub.Typeset(document);
});


var i = 0;
var rho = 1.25;
var pts = new Array();
var pt_labels = new Array();
// Important radian values about the unit circle
var rads = [0, Math.PI / 6, Math.PI / 4, Math.PI / 3, Math.PI / 2, 2 * Math.PI / 3,
               3 * Math.PI / 4, 5 * Math.PI / 6, Math.PI, 7 * Math.PI / 6, 5 * Math.PI / 4,
               4 * Math.PI / 3, 3 * Math.PI / 2, 5 * Math.PI / 3, 7 * Math.PI / 4, 11 * Math.PI / 6];

var rad_labels = ["$$0$$", "$$\\\\frac{\\\\pi}{6}$$", "$$\\\\frac{\\\\pi}{4}$$",
               "$$\\\\frac{\\\\pi}{3}$$", "$$\\\\frac{\\\\pi}{2}$$",
               "$$\\\\frac{2\\\\pi}{3}$$", "$$\\\\frac{3\\\\pi}{4}$$",
               "$$\\\\frac{5\\\\pi}{6}$$", "$$\\\\pi$$", "$$\\\\frac{7\\\\pi}{6}$$",
               "$$\\\\frac{5\\\\pi}{4}$$", "$$\\\\frac{4\\\\pi}{3}$$",
               "$$\\\\frac{3\\\\pi}{2}$$", "$$\\\\frac{5\\\\pi}{3}$$",
               "$$\\\\frac{7\\\\pi}{4}$$", "$$\\\\frac{11\\\\pi}{6}$$"];




var fun = board.create('text', [0, 0, function() {
    return '\\[f(x) = e^{' + 2 + 'x}\\]';
}]);

i = 1;
pt_labels[i] = board.create('text', [rho * Math.cos(rads[i]), rho * Math.sin(rads[i]), rad_labels[i]]);

var UnitCircle = board.create('circle', [[0, 0], [0, 1]]);

for (i = 0; i <= 16; i++) {

    pts[i] = board.create('point', [Math.cos(rads[i]), Math.sin(rads[i])], {
        fillColor: '#000000',
        strokeColor: '#000000',
        withLabel: false
    });

    if (i !== 1)
    pt_labels[i] = board.create('text', [rho * Math.cos(rads[i]), rho * Math.sin(rads[i]), rad_labels[i]]);

}

// Uncomment this.
var CircumPoint = board.create('glider', [1, 0, UnitCircle], {
    withLabel: false
});

var origin = board.create('point', [0, 0], {
    fillColor: '#000000',
   ...