DEV Community

OnePassApps
OnePassApps

Posted on

The Value Axis of the Chart Maker: 16 Datasets, One Step Rule, and Why a Maximum of 13 Draws Only Four Gridlines

I work on OnePassApps, and we build the Chart Maker, so this is a measurement of our own app taken today, 9 November 2026, in a signed-out browser tab with no account.

The Chart Maker turns a pasted CSV into a bar, line or scatter chart, and the app guide walks through the same three stages. This post is about one thing I had never taken apart: the ladder of numbers the preview draws up the value axis.

The question

A bar chart with a maximum of 97 does not draw a gridline at 97. It draws 0, 25, 50, 75 and 100. A chart whose maximum is 13 draws 0, 5, 10 and 15. The question is what decides between those ladders, and whether the app ever puts a gridline somewhere that would surprise you.

How I measured

Sixteen datasets, one per paste, all in the same tab: a header row, a text column of month names and one numeric column called Value, five data rows each. I pasted each CSV into the app's own "Paste CSV" box, let the panel rebuild the chart, and read the gridline labels the panel itself prints, plus the one-line summary it writes under the preview. Nothing was uploaded, nothing was downloaded, no account was used.

Here is every one of the sixteen, with the gridlines exactly as the panel printed them.

Data (min, max) Gridlines the panel printed
5, 97 0, 25, 50, 75, 100
1, 9 0, 2.5, 5, 7.5, 10
8, 8 (all equal) 0, 2, 4, 6, 8
1, 7 0, 2, 4, 6, 8
2, 60 0, 20, 40, 60
1, 101 0, 50, 100, 150
7, 340 0, 100, 200, 300, 400
300, 4,000 0, 1,000, 2,000, 3,000, 4,000
1, 13 0, 5, 10, 15
0.05, 0.37 0, 0.1, 0.2, 0.3, 0.4
0.05, 0.8 0, 0.2, 0.4, 0.6, 0.8
0.01, 0.1 0, 0.025, 0.05, 0.075, 0.1
3, 5 0, 2, 4, 6
-12, 5 -15, -10, -5, 0, 5
-5, 1 -6, -4, -2, 0, 2
-8, -1 -8, -6, -4, -2, 0

The rule

Three steps, and they reproduced all sixteen ladders exactly, in the same order, including the negative ones.

1. Take the span. If every value is positive, the span is the maximum, because the axis starts at zero anyway. If any value is negative, the span is the maximum minus the minimum.

2. Choose the step. Take a quarter of the span and round it up to the next number in the set 1, 2, 2.5, 5, 10, 20, 25, 50 - that is, 1, 2, 2.5 and 5 times a power of ten.

3. Place the ends. The top gridline is the maximum rounded up to a whole number of steps. The bottom gridline is the minimum rounded down to a whole number of steps, except that it never goes above zero. When every value is positive the bottom gridline is therefore always zero: the dataset 3, 4, 5, 3, 4 is drawn with its lowest gridline at 0, not at 3.

Written out, the whole thing is:

span = max - min(0, min)
step = smallest of {1, 2, 2.5, 5} x 10^k that is at least span / 4
top  = ceil(max / step) * step
bottom = min(0, floor(min / step) * step)
gridlines = bottom, bottom + step, ... top
Enter fullscreen mode Exit fullscreen mode

Worked through the awkward ones:

  • Maximum 97, minimum 5. Span 97. A quarter is 24.25, so the step is 25. The top rounds up to 100, the bottom to zero: 0, 25, 50, 75, 100.
  • Maximum 9, minimum 1. Span 9. A quarter is 2.25, and 2.5 is the next allowed step. The top rounds up to 10: 0, 2.5, 5, 7.5, 10.
  • Maximum 13, minimum 1. Span 13. A quarter is 3.25. There is no step of 3 or 3.5 in the set, so the step jumps to 5 and the top lands on 15: 0, 5, 10, 15.
  • Maximum 0.1, minimum 0.01. Span 0.1. A quarter is 0.025, which is 2.5 times a hundredth and is allowed as it stands: 0, 0.025, 0.05, 0.075, 0.1.
  • Minimum -12, maximum 5. Span 17. A quarter is 4.25, so the step is 5. The top is already 5, the bottom floors to -15: -15, -10, -5, 0, 5.

Four things that follow from it

The steps are 1, 2, 2.5 and 5, each times a power of ten. A chart with a maximum of 9 gets 2.5; a chart with a maximum of 13 gets 5, because a quarter of 3.25 has no allowed step until 5. No step of 3 and none of 1.5 appeared in any of the sixteen ladders - the smallest set of steps that reproduces all sixteen is 1, 2, 2.5 and 5 times a power of ten, and that is the set I am using here.

Most charts get five gridlines, and some get four. The step is aimed at four intervals, so five labels is the normal case. When the step overshoots - maximum 13 with a step of 5, or maximum 60 with a step of 20, or maximum 5 with a step of 2 - the top lands sooner and you get four labels instead of five.

Zero is always on the axis, even when no value is zero. The all-negative dataset, whose values run from -8 to -1, is drawn with -8, -6, -4, -2 and 0. The zero line is added above the data, not omitted from it. And the lowest gridline is the floor of the minimum: -12 becomes -15, -5 becomes -6, and -8 stays at -8 because it is already a whole number of steps.

The top gridline is never below the maximum, and never more than one step above it. 13 becomes 15, 101 becomes 150, 340 becomes 400, 0.37 becomes 0.4, and 97 becomes 100. Where the data maximum is already a whole number of steps, the top gridline lands exactly on it: the maximum of 8 draws 0, 2, 4, 6, 8 and the maximum of 4,000 draws 0, 1,000, 2,000, 3,000, 4,000.

The panel's own summary sentence

Under the preview the app writes a sentence, and it is not about the gridlines but about the data: for the maximum-97 dataset it reads "Bar chart of Value by Month, 5 points: highest Mar at 97, lowest Apr at 5. Exact values are in the data table."

One small quirk falls out of it. When all five values are the same - the flat dataset, where every row is 8 - the sentence reads "highest Jan at 8, lowest Jan at 8", naming January for both the highest and the lowest. There is no tie-break and no second row; it takes the first row it finds for both.

What this does not cover

This is the ladder in the preview panel, read from the panel's own printed labels. It is one build on one day, from one signed-out session, with bar charts of five rows and one numeric column, in English. I did not test the line and scatter chart types, other row counts, other locales, or the labels inside a downloaded file - an earlier post here measured the downloaded SVG separately, and this post is not about that. The rule above is my reading of the sixteen ladders I measured, and it matched all sixteen; I did not check it against every value a chart could hold. The set of allowed steps is the smallest one that fits those sixteen - a step of 3 might exist for other data and simply never came up in them.

The Chart Maker is free to use in your browser, with no account and no card. If you have a CSV where the axis lands somewhere odd, the gridlines are always a whole number of steps apart, the step is always one of 1, 2, 2.5, 5 times a power of ten, and zero is always on the axis.

Top comments (0)