Search IntMath
Close

450+ Math Lessons written by Math Professors and Teachers

5 Million+ Students Helped Each Year

1200+ Articles Written by Math Educators and Enthusiasts

Simplifying and Teaching Math for Over 23 Years

# 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.

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)

Improved grids on a JSXGraph graph

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

### 9 Comments on “How to code JSXGraph axes, ticks and grids”

1. John Rodgers says:

Thank you and much needed examples. This will save hours, or perhaps more importntly, allow projects to move ahead.

Some of the plots seem to be demonstrting zoom, but the zoom pnel is missing. Is it suppoesed to do that?

2. John Rodgers says:

3. Murray says:

@John: Glad you found it useful. Yes, I use the keyboard-based zoom most of the time now (rather than the navigation panel), as it is a lot quicker and easier.

Hello,

I need grid cells, be square.
In this example:
https://www.intmath.com/cg3/jsxgraph-axes-ticks-grids.php
they are rectangles.
How do I solve this problem?

Thanks

5. Murray says:

@Adrian: You need keepaspectratio:true in the board definition. There's an example about half way down the other JSXGraph example page, here:

https://www.intmath.com/cg3/jsxgraph-coding-summary.php

6. Damu says:

How can I make triangle vertices draggable?
Am I have to add \$().draggable to it?

7. Murray says:

@Damu: JSXGraph points are draggable by default.

To create a triangle with draggable vertices in JSXGraph, you could use this example Polygons but use just 3 points.

8. ravi says:

How can i use sub-script / super-script values as angle values?? like (x0,x1,..)

9. Murray says:

@ravi: This is how to do it:

var txt = board.create("text", [2,2,"(x_0, y_0)"]);

### 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.

From Math Blogs