I'm using different charts (Line & Bar charts) in my Web app. I want to know whether background grid lines are good to have in charts or not? Does these lines distracts user attentions from main datalines or not? Different charts have very light color grid lines (mostly light gray) but still they make a difference. Or may be I'm wrong but I just want to know what is good practise whether to have these lines or not?

  • 2
    A picture is worth a thousand words. Please provide some. Commented Jul 12, 2015 at 14:21

2 Answers 2


I think it varies with the amount of data you wish to display. Let's take line charts for example - if you have only one or two lines describing your data, I think it becomes relevant to see the grid (and does not cause much clutter) as it helps to see the reference values. e.g. Seeing that the blue line just went over the '50' line grid is pretty easy to see.

However, if you have many lines I believe grids become not so relevant. It would be helpful if they were near transparent to allow to extract that data with a close examination of the graph but on it's own people will compare data between lines.

For bar charts example I see a different scenario where the grid lines would pretty much always be helpful specially when you have many bars, for ease of comparison.

I'm not sure how you intent to implement these graphs but maybe you should ask yourself. "How long do I expect the user to look at this graph" and work your way from there. The answer can range from a quick glance to a detailed analysis, and for each case the use of grid lines can be different.

Hope I could help a bit.


If you do decide to go with gridlines, you must consider a few issues:

  • Screen size is important - lots of grid lines close together on a small screen will be far more confusing than helpful. Besides, if the screen is small enough (i.e. anything mobile) your users will probably be able to check easily against the relevant axis. Perhaps have a rule that below a certain display size the gridlines are turned off, or at the very least made very feint.
  • Spacing choices are vital - if your app is likely to be used on a wide variety of devices with a significant range of screen sizes, you will have to work out your gridlines dynamically. There are no hard and fast rules on this, but I tend to specify no more than 10 lines on any given axis no matter what the zoom level of the chart (this is based on general user feedback for our application, not a scientific study).
  • If you're likely to have a secondary x- or y-axis available, you'll probably find that the gridlines will have to be removed, or they become either irrelevant for one axis (if you use only one set) or way too cluttered (if you give each axis its own lines).
  • Thanks Tom for your valuable suggesstions. Much appreciated.
    – Omar Bahir
    Commented Jul 13, 2015 at 12:05

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.