Search code examples
labelaxisjsxgraph

JSXGraph: What is the preferred way to label axes?

I would like to label the axes in my diagrams with the respective physical quantities.

What have found is that I can either just place a text close to the arrow tips. But this means that I have to re-do that when the bounding box changes.

Or I can manually draw axes with labels.

But is there maybe another, simple and robust way to label the automatically drawn axes? The goal would be to

  • not have to specify coordinates,
  • have the labels near the arrow heads of the axes,
  • have the text fixed (i.e. non-draggable).
Solution

  • You can start with something like this:

    const board = JXG.JSXGraph.initBoard('jxgbox', { 
  boundingbox: [-5, 20, 5, -5], axis:true,
  defaultAxes: {
    x : {
    name: 'X',
    withLabel: true,
    label: {
        position: 'rt',
      offset: [-10, -15]
    }
  },
  y : {
    withLabel:true,
    name: 'Y',
      label: {
        position: 'rt',
        offset: [-20, -10]
      }
    }
  }
});

    See it live at https://jsfiddle.net/6jLrpboe/3/