I want the y-axis to show 2, 4, 6, 8, ... 16 with gridlines at each of those values (and no ticks or gridlines between). Is there some option which can control the axis values at which gridlines are shown and labelled?
I have found an ugly workaround: by making the bounding box [-1, 8, 6, -1] with scale:0.5 for the y-axis ticks, and the board height 400 px, I see what I want. However, plotting a point does not take the scaling into consideration: e.g. (1,4) shows as (1,2) in the InfoBox. Also, if I increase the board height, e.g. to 500 px, the y-axis and gridlines change to 1, 2, 3, 4,..., 16, so my workaround is not dealing with the underlying issue, it is just fooling the system into displaying what I want to be seen.
InsertTicks needs to be false for ticksDistance to work
If you want to set it globally, uncomment first three lines and put them somewhere before any initBoard
/* JXG.Options.axis.ticks.insertTicks = false; */
/* JXG.Options.axis.ticks.ticksDistance = 2; */
/* JXG.Options.axis.ticks.minorHeight = 0; */
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-10, 10, 10, -10],
axis:{
ticks:{
insertTicks:false,
ticksDistance: 2,
minorHeight: 0,
}
}
});
And for only set to y axis:
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-10, 10, 10, -10],
axis:true,
defaultAxes:{
y:{
ticks:{
insertTicks:false,
ticksDistance: 2,
minorHeight: 0,
}
}
}
});