In the product we sell, we show comparisons between websites on a number of metrics. Some of those metrics are best displayed with linear graphs, some are best displayed with logarithmic graphs.

enter image description here

As you can see, we have a dropdown menu to flip between the different metrics. Currently, we adjust the logarithmic setting automatically depending on what metric you're looking at.

enter image description here

We're concerned users don't "get" what is going on. Any brilliant ideas on how to do the representation?

5 Answers 5


In addition to using gridlines to reinforce the non-uniformity of the axis, you could also add:

  • An animation between linear and logarithmic, showing the scaling that occurs.
  • A "learn more about logarithmic graphs" popup or a "What's this?" notifier next to the option. This should explain how they are better at spotting things that vary wildly in scale and where % change is more important than absolute numbers.

Finally, if users are really looking at data that varies that wildly, is a log-lin line graph the best representation? What questions are they trying to answer? E.g., do they want to know month-over-month growth? How much better/worse they're doing than competitors?

Throwing a graph up there is basically giving up, telling the users, "Here's the data--go fetch, yourself." What questions can you answer for them? Augmenting the graph with other visualizations will distinguish your site from the thousand other sites that just stick an unexplained graph in users' faces.

  • +1 for what's this. Animated switch - nice idea. +10 for try to do more than just plot it, so the user doesn't have to measure the difference with a ruler :-) To be fair, maybe that functionality is there too so benefit of the doubt maybe. Commented Aug 10, 2011 at 19:26

Perhaps you could express the non-linear scale by making your gridlines become denser along the y-axis, as in the (poor) MS Paint mockup below:

enter image description here

  • Using minor gridlines (in a faint color) can really reinforce what is going on. You could also make the axis labels more salient. Commented Aug 10, 2011 at 14:27
  • +1 That really helps. i peeked in on the question to see what ideas people are throwing around. Those gridlines really drive the point home.
    – Ian Boyd
    Commented Aug 10, 2011 at 19:53
  • I don't really see how this is qualitatively different from OP's graph. Additional nit-picking: there can never be a zero on a logarithmic scale, because log(0) -> - oo
    – Alexis
    Commented May 17, 2019 at 20:20
  • @Alexis This question is almost eight years old. Commented May 19, 2019 at 10:31

What is the basis for your concern? Are you guessing or do you have data? That's the first step: actually ask your users whether this is confusing or not. Perhaps they understand just fine.

One immediate thing I would change, however, is to have the "use logarithmic scale" and the actual readout on the Y axis be more visually connected. Consider actually labeling the Y axis as being on a logarithmic scale when it is vs. when it isn't.

I'm also curious whether there's any visual feedback of the change that happens when you check the checkbox. Do you use something like a yellow fade technique to update them on what part of the interface has been changed?

  • There has been some user testing - it came back OK. But we're still worried ;) I totally agree on moving the control - that's in-progress. Right now there is no visual feedback. I'm torn on the yellow - it's attracting the eye to something that, in the end, isn't the thing I really want the user to watch. I think more testing is the right answer. Thanks.
    – Dan Dunn
    Commented Aug 9, 2011 at 21:55

I would give the logarithmic graph a background shading, graduating from white at the bottom to slightly less white at the top of each section, but making the top section of each colour progressively darker for each higher section - as in the first image below.

You could then optionally also not make those gradients linear but roughly representative of the logarithmic tendancy - see second image.

It might not even need to be as dark as this - it's purely a differentiator from the standard non-logarithmic graph, which you can either leave with a white background, or have a single linear graduation from bottom to top as in the third image below.

enter image description here

enter image description here

Non logarithmic: enter image description here

  • The faded backgrounds starts over at every multiple of 10 - the problem is that the visual feedback don't match the reality since the logarithmic increase is smooth, it has no steps on every multiple of 10. Furthermore, I am not sure that fades will be seen this way since so many websites uses fades in the background. It was a good tought experiment though - to visually try to help the user about what the scale is. I would put in an icon on the Y axis with representation of log when the log scale is used and vice versa. Commented Aug 10, 2011 at 8:23
  • 2
    @Henrik I understand logarithmic increase is smooth, but the gradient background is a metaphor for standard logarithmic graph paper where the lines get more and more dense and then so dense that you can hardly differentiate the lines and so you start them again in the next multiple of 10. Commented Aug 10, 2011 at 8:47
  • 1
    It might just be me, but I find this solution confusing. It doesn't help me understand the graph better. I don't think basing the design on logarithmic graph paper helps people unfamiliar with logarithms understand the concept since they wouldn't be exposed to the graph paper either. (remember that I'm an 'expert' so discount my opinion unless you have data that supports it).
    – Rahul
    Commented Aug 10, 2011 at 12:45
  • @Rahul The point is that it's a differentiator between linear and logarithmic. It's a visual representation of the fact that you are looking at one type of graph over another, when you are using the dropdown box to flip between different types of graphs, some of which are linear and some of which are logarithmic. You mentioned in your own answer about having the checkbox more visually connected - by changing the background, I'm proposing the differential be right there in with the content so you don't even have to look at any other indicator to know it's a linear or logarithmic scale. Commented Aug 10, 2011 at 13:01
  • 1
    @Roger I understand how it works, I just don't think it helps explain that you're looking at a logarithmic graph. It would make me scratch my head and say "what is this supposed to indicate?"
    – Rahul
    Commented Aug 10, 2011 at 13:08

As a HubSpot user... Get it in there now. :)

EDIT: Just realized that was a comment. In appropriate as a response so let me clarify:

I recognize the UI as HubSpot (whether it is or isn't is irrelevant from a UX perspective) so I made a tongue-in-cheek response. The heart of the matter is logarithmic scale is not going to be understood easily by everyone, but I also use a tool called Market Samurai which provides me with good information because it provides logarithmic scale.

Without it the ability to graph complex data is completely lost.

I have previously used one tool where every time a change of scaling factors occurred they provided some sort of demarcation (double dashed line with the text <-- change in scale --> between the lines. Although not technically feasible in logarithmic scaling it could be used if you had standard breakpoints.

Although it is not as clean or "sexy" it leaves little in the room for interpretation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.