This is a specific example to style the default axes.
- Turn off automatic tick positioning by `insertTicks: false`
- The $x$-axis has labels at every other tick line: `minorTicks: 1`
- The $y$-axis has labels at every tick line: `minorTicks: 0`
- Both axes have labels for 2, -2, 4, -4, 6, ...: `ticksDistance: 2`
- If the automatic tick positioning is turned off, there will appear performance problems if users zoom out. Therefore, it might be advisable to limit the zoom factor: `zoom: {min: 0.5, max: 2}`
- The labels can be styled by supplying a CSS class: `label: {fontSize: 14, display: 'html', cssClass: 'tickLabels'}`
<style>
.tickLabels {
background-color: white;
padding: 0px
}
</style>// Define the id of your board in BOARDID
const board = JXG.JSXGraph.initBoard(BOARDID, {
boundingbox: [-9, 17, 9, -17],
axis: true,
defaultAxes: {
x: {
ticks: {
insertTicks: false, // Turn off automatic tick placing
minorTicks: 1, // One minor tick between two major ticks
minorHeight: -1, // Minor ticks are finitely long, too
ticksDistance: 2, // Major ticks are positioned at multiples of two
label: {
fontSize: 14,
display: 'html',
cssClass: 'tickLabels'
}
}
},
y: {
ticks: {
insertTicks: false, // Turn off automatic tick placing
minorTicks: 0, // No minor ticks between major ticks
ticksDistance: 2, // Major ticks are positioned at multiples of two
label: {
fontSize: 14,
display: 'html',
cssClass: 'tickLabels'
}
}
}
},
zoom: {
min: 0.5,
max: 2
}
});
This example is licensed under a Creative Commons Attribution ShareAlike 4.0 International License.
Please note that you have to mention The Center of Mobile Learning with Digital Technology in the credits.