title: JSXGraph - Circle with ticks and ticklabels
body: <p>I have a piece of code here:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;
   &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;https://jsxgraph.org/distrib/jsxgraph.css&quot; /&gt;
   &lt;script type=&quot;text/javascript&quot; src=&quot;https://jsxgraph.org/distrib/jsxgraphcore.js&quot;&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id=&quot;box&quot; class=&quot;jxgbox&quot; style=&quot;width:500px; height:500px;&quot;&gt;&lt;/div&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
  var brd = JXG.JSXGraph.initBoard('box',{axis:false,boundingbox:[-10,10,10,-10],keepaspectratio:true});
  
  var p = brd.create('point', [0,0]);
  var q = brd.create('point', [10,0]);
  var circ = brd.create('circle', [p, q]);
  
  // Create an empty curve
  var ticks = brd.create('curve', [[0], [0]], 
               {labels: ['0','30','60','90','120','150','180','210','240','270','300','330'],           
                strokeWidth: 1, 
                strokeColor: 'blue',
                strokeOpacity: 0.5,
                drawLabels: true,
                label: {offset: [-0.5,-0.5], anchorX: 'middle', anchorY: 'top'}});
  
  // Make ticks out of the curve 
  ticks.updateDataArray = function() {
      var cx = circ.center.X(),
          cy = circ.center.Y(),
          r = circ.Radius(),
          i, 
          ticklen = 0.3,           // Length of ticks in user space coordinates
          steps = 12,              // Number of ticks
          d = ticklen * 0.5,
          alpha = 2 * Math.PI / steps;
  
      this.dataX = [];
      this.dataY = [];
      for (i = 0; i &lt; steps; i++) {
          // Start of a tick
          this.dataX.push( cx + (r - d)* Math.cos(i * alpha) );
          this.dataY.push( cy + (r - d) * Math.sin(i * alpha) );
          // End of tick
          this.dataX.push( cx + (r + d) * Math.cos(i * alpha) );
          this.dataY.push( cy + (r + d) * Math.sin(i * alpha) );
          // Interrupt the curve
          this.dataX.push( NaN );
          this.dataY.push( NaN );
      }
  };
  brd.update();
  &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>The tick labels are not getting displayed on the JSXGraph.
  What is the solution?</p>