Choosing an attractive linear scale for a graph's Y Axis

Question

I'm writing a bit of code to display a bar (or line) graph in our software. Everything's going fine. The thing that's got me stumped is labeling the Y axis.

The caller can tell me how finely they want the Y scale labeled, but I seem to be stuck on exactly what to label them in an "attractive" kind of way. I can't describe "attractive", and probably neither can you, but we know it when we see it, right?

So if the data points are:

   15, 234, 140, 65, 90

And the user asks for 10 labels on the Y axis, a little bit of finagling with paper and pencil comes up with:

  0, 25, 50, 75, 100, 125, 150, 175, 200, 225, 250

So there's 10 there (not including 0), the last one extends just beyond the highest value (234 < 250), and it's a "nice" increment of 25 each. If they asked for 8 labels, an increment of 30 would have looked nice:

  0, 30, 60, 90, 120, 150, 180, 210, 240

Nine would have been tricky. Maybe just have used either 8 or 10 and call it close enough would be okay. And what to do when some of the points are negative?

I can see Excel tackles this problem nicely.

Does anyone know a general-purpose algorithm (even some brute force is okay) for solving this? I don't have to do it quickly, but it should look nice.

Answer 1

Sounds like the caller doesn't tell you the ranges it wants.

So you are free to changed the end points until you get it nicely divisible by your label count.

Let's define "nice". I would call nice if the labels are off by:

1. 2^n, for some integer n. eg. ..., .25, .5, 1, 2, 4, 8, 16, ...
2. 10^n, for some integer n. eg. ..., .01, .1, 1, 10, 100
3. n/5 == 0, for some positive integer n, eg, 5, 10, 15, 20, 25, ...
4. n/2 == 0, for some positive integer n, eg, 2, 4, 6, 8, 10, 12, 14, ...

Find the max and min of your data series. Let's call these points:

min_point and max_point.

Now all you need to do is find is 3 values:

- start_label, where start_label < min_point and start_label is an integer
- end_label, where end_label > max_point and end_label is an integer
- label_offset, where label_offset is "nice"

that fit the equation:

(end_label - start_label)/label_offset == label_count

There are probably many solutions, so just pick one. Most of the time I bet you can set

start_label to 0

so just try different integer

end_label

until the offset is "nice"

Answer 2

O my, long time ago O have written a graph module that covered this nicely. Digging in the grey mass gets the follwing:

• Determine lower and upper bound of the data. (Beware of the special case where lower bound = upper bound!
• Divide range into the required amount of ticks.
• Round the tick range up into nice amounts.
• Adjust the lower and upper bound accordingly.

Lets take your example:

15, 234, 140, 65, 90 with 10 ticks

1. lower bound = 15
2. upper bound = 234
3. range = 234-15 = 219
4. tick range = 21.9. This should be 25.0
5. new lower bound = 25 * round(15/25) = 0
6. new upper bound = 25 * round(1+235/25) = 250

So the range = 0,25,50,...,225,250

You can get the nice tick range with the following steps:

1. divide by 10^x such that the result lies between 0.1 and 1.0 (including 0.1 excluding 1).
2. translate accordingly:
   • 0.1 -> 0.1
   • <= 0.2 -> 0.2
   • <= 0.25 -> 0.25
   • <= 0.3 -> 0.3
   • <= 0.4 -> 0.4
   • <= 0.5 -> 0.5
   • <= 0.6 -> 0.6
   • <= 0.7 -> 0.7
   • <= 0.75 -> 0.75
   • <= 0.8 -> 0.8
   • <= 0.9 -> 0.9
   • <= 1.0 -> 1.0
3. multiply by 10^x.

In this case, 21.9 is divided by 10^2 to get 0.219. This is <= 0.25 so we now have 0.25. Multiplied by 10^2 this gives 25.

Lets take a look at the same example with 8 ticks:

15, 234, 140, 65, 90 with 8 ticks

1. lower bound = 15
2. upper bound = 234
3. range = 234-15 = 219
4. tick range = 27.375
   1. Divide by 10^2 for 0.27375, translates to 0.3, which gives (multiplied by 10^2) 30.
5. new lower bound = 30 * round(15/30) = 0
6. new upper bound = 30 * round(1+235/30) = 240

Which give the result you requested ;-).

Answer 3

Thanks for the question and answer, very helpful. Gamecat, I am wondering how you are determining what the tick range should be rounded to.

tick range = 21.9. This should be 25.0

To algorithmically do this, one would have to add logic to the algorithm above to make this scale nicely for larger numbers? For example with 10 ticks, if the range is 3346 then the tick range would evaluate to 334.6 and rounding to the nearest 10 would give 340 when 350 is probably nicer.

What do you think?

Answer 4

Try this code. I've used it in a few charting scenarios and it works well. It's pretty fast too.

public static class AxisUtil
{
    public static float CalculateStepSize(float range, float targetSteps)
    {
        // calculate an initial guess at step size
        float tempStep = range/targetSteps;

        // get the magnitude of the step size
        float mag = (float)Math.Floor(Math.Log10(tempStep));
        float magPow = (float)Math.Pow(10, mag);

        // calculate most significant digit of the new step size
        float magMsd = (int)(tempStep/magPow + 0.5);

        // promote the MSD to either 1, 2, or 5
        if (magMsd > 5.0)
            magMsd = 10.0f;
        else if (magMsd > 2.0)
            magMsd = 5.0f;
        else if (magMsd > 1.0)
            magMsd = 2.0f;

        return magMsd*magPow;
    }
}