I'm building an app with graphs in it, using angularjs, d3 and bootstrap: http://krispo.github.io/angular-nvd3/#/

The result:


Since there are many types of graphs with each different implementations, I am currently mostly interested in bar graphs.

How can I design a bar graph so it's usable for mobile devices?

2 Answers 2


A horizontal grouped bar chart might be a good solution, too! Admittedly, time-based charts should normally have time on the x-axis, but this could work for mobile charts.

enter image description here


Know Your Audience, Know Your Data and Choose Wisely - The Who, The What, and The How

Before finalizing a graph, you should always analyse your users and data and then choose the best way of represent the data to your users.

Answering you question, bar graphs can be designed for mobile in two ways:

  1. Fitting the bars within the screen - This option is preferred if you have only a limited number of bars.
  2. Having a horizontal scroll for the bars - This option is preferred if you have a large number of bars.

Also, using responsive bar graphs we can design the graph for mobile to show all the bars within the small screen but, this would reduce the width of the bars considerably if you have a large number of bars. In such cases, it would be a good choice to have a horizontal scroll for the bars.

Reference: Data Visualization Advice for UX Designers

  • Ok, I think reducing the number of bars sound good. Jan 20, 2018 at 3:09
  • Thank You @gentlyawesome :) Maybe you should upvote this answer or mark this as correct since you have felt this as a good solution. Jan 22, 2018 at 5:40
  • 1
    Oh right, totally forgot about that. Cheers mate. Jan 23, 2018 at 0:02

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.