jsxgraph axis labels
HTML
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<div id='box' class='jxgbox'></div>
CSS
#box {
width:500px;
height:500px;
}
.hi {
color: red !important;
background: red !important;
}
JavaScript
var board = JXG.JSXGraph.initBoard('box', {axis: false, boundingbox: [-10,10,10,-10], grid: true, keepaspectratio: true});
yaxis = board.create('axis', [[0, 0], [0, 1]],
{fillColor: 'blue',
ticks: {
insertTicks: false,
ticksDistance: 3,
fillColor: 'red',
label: {
offset: [-20, -20],
cssClass:'hi',
//strokeColor: 'red',
fillColor: 'green',
highlightCssClass: 'hi',
css: 'background-color: green !important; color:blue !important;'
}
},
label : {
cssClass: 'hi',
strokeColor: 'blue',
highlightCssClass: 'hi',
fillColor: 'red',
hightlighted: true,
highlight: true
}
});
board.create('point', [1, 1]);
// change distance to 4, have to do it the hacky way.
yaxis.defaultTicks.ticksFunction = function () { return 4; };
// full update is required because axis elements have the needsRegularUpdate attribute set to false and won't update on regular updates.
board.fullUpdate();