0

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

The result:

graph

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?

1

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. – gentlyawesome Jan 20 '18 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. – Akhil Ashok Jan 22 '18 at 5:40
  • 1
    Oh right, totally forgot about that. Cheers mate. – gentlyawesome Jan 23 '18 at 0:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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