JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://eucbeniki.sio.si/scripts/jsxgraph.css">
<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px; margin-left:auto; margin-right:auto;"></div>

JavaScript

brd = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-15, 20, 15, -10], keepaspectratio:true, axis: true});

p1 = brd.create('point',[0,0]);

p2 = brd.create('point',[5,5]);
p3 = brd.create('point',[-5,-5]);
p4 = brd.create('point',[-10,10]);
sector = brd.create('sector',[p1,p2,p3],{hasInnerPoints:true,fixed:false,
                                         withLabel:true,name:function(){return p1.Dist(p2);}});
sector.label.setAttribute({visible:false});
sector.on('over', function () {
    this.label.setAttribute({visible:true});
});
sector.on('out', function () {
    this.label.setAttribute({visible:false});
});
curve = brd.create('curve',JXG.Math.Numerics.bezier([p1,p2,p3,p4]),{hasInnerPoints:true});