View source for Fine tuning of labels

Center the position of labels and use custum CSS styles for labels.
<html>
<style type="text/css">
.myLabel {
    border: 1px solid black;
    border-radius: 3px;
    padding: 2px;
}
</style>
</html>

<jsxgraph width="400" height="400">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -1], 
        axis: true, showcopyright: true, shownavigation: true});

var p1 = board.create('point', [-2, 3], 
    {size:20, 
     fillColor: 'none',
     label: { 
         offset: [0, 0],
         anchorX: 'middle',
         anchorY: 'middle',
        }
    });

var p2 = board.create('point', [2, 3], 
    {size:5, 
     label: { 
         offset: [0, 10],
         anchorX: 'middle',
         anchorY: 'bottom',
         cssClass: 'myLabel',
         highlightCssClass: 'myLabel'
        }
    });
</jsxgraph>

===The underlying JavaScript code===

<source lang="css">
.myLabel {
    border: 1px solid black;
    border-radius: 3px;
    padding: 2px;
}
</source>

<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5, 5, 5, -1], 
        axis: true, showcopyright: true, shownavigation: true});

var p1 = board.create('point', [-2, 3], 
    {size:20, 
     fillColor: 'none',
     label: { 
         offset: [0, 0],
         anchorX: 'middle',
         anchorY: 'middle',
        }
    });

var p2 = board.create('point', [2, 3], 
    {size:5, 
     label: { 
         offset: [0, 10],
         anchorX: 'middle',
         anchorY: 'bottom',
         cssClass: 'myLabel',
         highlightCssClass: 'myLabel'
        }
    });
</source>


[[Category:Examples]]
[[Category:Text]]