Change offset of axis tick labels OR remove board y-axis

[d.wi...@tees.ac.uk]

As a picture is worth a thousand words it's probably easiest to start with this pen.

What I'm trying to achieve is either the diagram on the right without the y axis or the one on the left with the axis labels in line with the ticks. If you look at the text positions, I would like the 1m and 3m labels lined up with the 20kN and 30kN arrows respectively (works for the one on the right but not the left one)

The difference between the two boards is that the one on the left is has axes switched off and a specific x-axis drawn and the the other uses standard axes. Additionally, I don't seem to be able to get drawZero to work as I'd like a zero marker. I've tried having it as both a global option and within the board/axis options but it doesn't seem to have an effect. I'm guessing I've made an error with the syntax somewhere but can't see it.

[Alfred Wassermann]

You can adapt both constructions to your needs.

Left construction: Use the following attributes for the ticks attributes of the new axis:

xaxis = board.create('axis', [[0, 0], [1,0]],
      {name:'m', withLabel: true,
             label: {position: 'rt',    // possible values are 'lft', 'rt', 'top', 'bot'
                        offset: [-5, 15],   // (in pixels)
                     },
       ticks: {
          label: {
            anchorX: 'middle',
            anchorY: 'top',
            offset: [0, -3]
          }
       }
            });

Right construction: starting with 0.99.6 you can customize the defaultaxes with the attributes of the board:

board2 = JXG.JSXGraph.initBoard('load2', {
    boundingbox: [-0.1, 10, 5.2, -10],
    axis: true,
    defaultAxes: {
      y: {
        visible: false
      }
    },
    grid: false,
    zoom: false, showNavigation: false
  });

Best wishes,
Alfred

[d.wi...@tees.ac.uk]

Hello Alfred,

That's fantastic thanks, I'd seen some of those options whilst looking through the documentation but hadn't figured out how to include them from a syntax point of view.

Finally, where do I need to put drawZero in order for it to work?

[Alfred Wassermann]

drawZero are a ticks attribute.
Here is an example:

            var x = board.create('axis', [[0, -2], [1, -2]], {
                ticks: {
                    strokeColor: 'blue',
                    drawZero: true  // Show zero
                }
            });

            x.defaultTicks.setAttribute({
                drawZero: false    // Hide zero
            });

Best wishes,
Alfred

[d.wi...@tees.ac.uk]

Hello Alfred,

Thanks as always for your help. After pulling my hair out for a while this morning I've realised that the issue was with my bounding box not with my drawZero defintions. As what I am actually trying to draw is a dimensioned beam as opposed to a conventional graph, my bounding box starts at -0.1 on the left hand side. This means that there isn't room to place text so the drawZero gets ignored. It looks like I had my tick attributes written correctly because as soon as increased the left hand side of the bounding box to -0.2 the zeroes appeared. I've made a cut down example illustrating this behaviour below, the cut off appears to be between -0.1885 and -0.19. I guess this would change if I used larger fonts.

https://codepen.io/DaveWishart/pen/MvgJLz

I'm not advocating making any changes as it doesn't make sense to write numbers where there would possibly get truncated but thought this might be useful to know for others.