How do I use MathJax for tick labels in JSXGraph

Question

I am using JSXGraph and would like to label the axes ticks as fractions using MathJax. For example, \(\frac{1}{2}\)

Can't figure out how to do that.

Answer 1

Please allow me to give a somewhat longer answer.

1. If you just want to have the tick labels displayed with the MathJax math font, it can be done like follows for the y-axis:

    var board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-0.1, 3, 1, -3],
        axis: true,
        defaultAxes: {
            y: {
                ticks: {
                    label: {
                        fontSize: 18,
                        display: 'html',
                        cssStyle: 'font-family: MJXZERO, MJXTEX',
                        offset: [-10, -5]
                    }
                }
            }
        }
    });
   

The important attributes are display:'html' and cssStyle: 'font-family: MJXZERO, MJXTEX',. Of course, you have to include the MathJax JavaScript library.

2. If you want to use MathJax to display the labels, it can be done like this (for the x-axis):

  const board = JXG.JSXGraph.initBoard('jxgbox', {
      boundingbox: [-1, 10, 11, -2],
      axis: true,
      defaultAxes: {
        x: {
            ticks: {
                label: {
                    fontSize: 15,
                    parse: false,
                    useMathJax: true,
                    display: 'html'
                },
                generateLabelText: (tick) => {
                    return '\\(' + tick.usrCoords[1].toFixed(0) + '\\)';
                }
            }
        }
      }
  });

3. Finally, to come back to your original question: The best approach seems to be to generate new, fixed ticks, similar to 2):

    const board = JXG.JSXGraph.initBoard('jxgbox', {
        boundingbox: [-0.1, 3, 1, -3],
        axis: true,            
        defaultAxes: {
            x: {
                ticks: {
                      visible: false,
                    drawLabels: false,
                }
            },
            y: {
                ticks: {
                    label: {
                        fontSize: 18,
                        parse: false,
                        display: 'html',
                        CssStyle: 'font-family: MJXZERO, MJXTEX',
                        offset: [-10, -5]
                    }
                }
            }
        }
    });
   
    board.create('ticks', [board.defaultAxes.x, [0.25, 0.5, 0.75]], {
        drawLabels: true,
        label: {
            fontSize: 20,
            parse: false,
            useMathJax: true,
            display: 'html',
            offset: [-10, -25]
        },
        generateLabelText: (tick) => {
            var v = tick.usrCoords[1];
            switch (v) {
                case 0.25:
                    return '\\(\\frac{1}{4}\\)';
                case 0.5:
                    return '\\(\\frac{1}{2}\\)';
                case 0.75:
                    return '\\(\\frac{3}{4}\\)';
            }
   
        }
    });
   

You can see 1) and 2) live at https://jsfiddle.net/ba8xh9jz/1/ and 3) at https://jsfiddle.net/ba8xh9jz/2/.