Skip to main content
Search IntMath

How to code JSXGraph axes, ticks and grids

By Murray Bourne, 13 Oct 2014

I've been creating graphs with JSXGraph for some time now, and I often get caught up with the problem of getting the axes to do what I want. Often you can't see the grid lines, so you have no idea of the scale of the graph, as can be seen in this screen shot.

How to code JSXGraph axes, ticks and grids
No y-axis scale indication - JSXGraph plot

Similarly, I found the business of creating grids (or are they ticks?) was quite troublesome.

So I set about trying to get it clear in my own mind. I wrote a summary of my discoveries here:

JSXGraph axes, ticks and grids

It's presented in several steps which increase in complexity. By the end, you'll see a graph that allows you to:

  1. See grid lines and labels all the time, no matter what zoom level is used
  2. See axes all the time (by "docking" them to the side if the graph is dragged - or zoomed - so the axes would go beyond view)
  3. Zoom in and out in one direction only (along the x- or y-direction)

How to code JSXGraph axes, ticks and grids
Improved grids on a JSXGraph graph

I hope those of you new to JSXGraph will find it useful.

See the 9 Comments below.

Leave a comment

Comment Preview

HTML: You can use simple tags like <b>, <a href="...">, etc.

To enter math, you can can either:

  1. Use simple calculator-like input in the following format (surround your math in backticks, or qq on tablet or phone):
    `a^2 = sqrt(b^2 + c^2)`
    (See more on ASCIIMath syntax); or
  2. Use simple LaTeX in the following format. Surround your math with \( and \).
    \( \int g dx = \sqrt{\frac{a}{b}} \)
    (This is standard simple LaTeX.)

NOTE: You can mix both types of math entry in your comment.


Tips, tricks, lessons, and tutoring to help reduce test anxiety and move to the top of the class.