In the default board axes (eg. https://jsfiddle.net/dr63zumf/1/), screenshot and code below, how can I change the thickness or width of the gridlines to make them thicker? There doesn't seem to be an option for this in the documentation.
Thanks,
Rob
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5], axis:true
});
Answering the comment by Rob:
It is not possible to have different widths for minorTicks
and majorTicks
, since internally a ticks-element of one axis is one SVG path. However, there are several workarounds possible:
1) Do not show minorTicks
at all:
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5],
axis:true,
defaultAxes: {
x: {
ticks: {
strokeWidth: 5,
minorTicks: 0
}
},
y: {
ticks: {
strokeWidth: 5,
minorTicks: 0
}
}
}
});
2) If you insist on minor ticks and major ticks, then do not show majorTicks
in the default ticks of the default axes, but add thick ticks without minorTicks
to the default axes, see https://jsfiddle.net/vf3muqgn/1/:
const board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-5, 5, 5, -5],
axis:true,
defaultAxes: {
x: {
ticks: {
majorHeight: 0
}
},
y: {
ticks: {
majorHeight: 0
}
}
}
});
board.create('ticks', [board.defaultAxes.x], {
strokeColor: '#cccccc',
minorTicks: 0,
majorHeight: -1,
strokeWidth: 3
});
board.create('ticks', [board.defaultAxes.y], {
strokeColor: '#cccccc',
minorTicks: 0,
majorHeight: -1,
strokeWidth: 3
});