JSFiddle - React, Tailwind, and code Playground

by migerh

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id="xbox" class="myboard"></div>

CSS

#xbox {
    border: 1px solid black;
    width:500px; height:300px;
    margin-bottom: 5px;
}

JavaScript

var board = JXG.JSXGraph.initBoard('xbox', { boundingbox: [-3, 4, 3, -4] } );

board.create('axis', [[-2, 1], [2, 2]], {
    straightFirst: false,
    straightLast: false,
    firstArrow: true,
    lastArrow: true,
    ticks: {
        drawZero: false,
        ticksDistance: 0.66,
        insertTicks: false,
        majorHeight: 20,
        drawLabels: true,
        label: {
            anchorX: 'middle',
            offset: [0, -16]
        }
    }
});

board.create('axis', [[-2, -1], [2, 0]], {
    straightFirst: false,
    straightLast: false,
    firstArrow: true,
    lastArrow: true,
    ticks: {
        drawZero: true,
        ticksDistance: 0.66,
        insertTicks: false,
        majorHeight: 20,
        drawLabels: true,
        label: {
            anchorX: 'middle',
            offset: [0, -16]
        }
    }
});