Axis with JSXGraph

How can I create on a JSXGraph board without a grid an axis without ticks but with some specific numbers (e.g. 25, 50, 75. etc.) on the axis?

I think I’ve tried everything on this page about axes, ticks and grids:
https://www.intmath.com/cg3/jsxgraph-axes-ticks-grids.php

I can now set the direction of the axis, severel things with ticks or the grid. But I still can’t manage the numbers on the axis.

If all tick lines on the axis should be suppressed, but the ticks labels should be visible, then the following code can be used:

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], 
    axis:true,
    defaultAxes: {
        x: {
        ticks: {
          visible: false,
          label: {visible: true}
        }
      },
        y: {
        ticks: {
          visible: false,
          label: {visible: true}
        }
      }
    }
});

With the board.create('ticks', ...) command, ticks can be positioned at some special positions by supplying an array with the positions. Again, the tick lines can be set to be invisible so that only labels are shown. Here is an example:

board.create('ticks', [board.defaultAxes.x, [1.5, 2.5]], {
  drawLabels: true,
  visible: false,
  // majorHeight: 10,
  label: {visible: true, anchorX: 'middle', anchorY: 'top', offset: [0, -10]}
});

If in addition the label values should be scaled by some factor, then the attribute scale comes in handy:

board.create('ticks', [board.defaultAxes.x, [-1.5, -2.5]], {
  drawLabels: true,
  visible: false,
  scale: 1/10,
  label: {visible: true, anchorX: 'middle', anchorY: 'top', offset: [0, -10]}
});

If you need even more flexibility it is probably better to place text elements close to the axis.

See it live at https://jsfiddle.net/mr0n43t7/.

Leave a Comment