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?

| improve this question | | | | |
0

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

| improve this answer | | | | |
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

| improve this answer | | | | |
  • 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.