JSXGraph: How do I hide the grid without hiding the axis labels and ticks?

Question

By default, JSXGraph's board renders with a grid in the background. When I instantiate it with the option axis: false, the grid disappears, but so do the axis labels and tickmarks.

Messing with JXG.Options like this doesn't seem to do anything:

JXG.Options.grid.strokeColor = '#ff0000';
JXG.Options.grid.strokeOpacity = 0;

The grid board option doesn't actually turn off the grid, just makes it behave differently on zoom, noted here.

Basically, making the board like this turns off the axis ticks and the grid for the Y axis:

var board = JXG.JSXGraph.initBoard(id, {
  axis: true,
  defaultAxes: {
    y: { ticks: { visible: false } }
  }
});

And changing visible to true makes the grid and the ticks visible.

How do I turn off just the background grid, leaving the axis labels intact?

Answer 1

Alright, I figured this out by looking at options.js in jsxgraph. The main grid is actually referred to as "ticks", closely related to the ticks on the axis line. In fact, it's drawn with the same piece of code I'm guessing. There's minorHeight and majorHeight for the ticks, referring to either ticks on the axis line or ticks on the entire background. minorHeight is 10 by default, and majorHeight is -1, a special case that means draw on the whole board. The solution is to change majorHeight so it draws like the minor ticks, just a little differently for clarity:

var board = JXG.JSXGraph.initBoard(id, {
  axis: true,
  defaultAxes: {
    y: { ticks: { visible: true, majorHeight: 5 } }
  }
});