Chart Design for Mobile Devices Made Simple

Think that one size fits all with visuals? Think again.

If you’re of a certain age, then you remember how easy it was to build and design charts and graphs that users could view on screens. The design and deployment process was simple because the vast majority of users viewed them on proper computers, most likely running one of a few versions of Microsoft Windows.

My how times changed.

Today, properly displaying visual information on screens is anything but simple. This stems from the explosion of mobiles devices and operating systems. And if you think that there’s only “one” version of Android, think again. (Interestingly, Microsoft has admitted its irrelevance on smartphones and tablets.)

Charts on Mobile Devices

Brass tacks: For a number of reasons and in no particular order, properly displaying charts and graphs is often challenging:

  • There’s just less real estate (read: screen size) to work with.
  • Zooming in and out on data often zooms in on the whole chart—not the data within the chart. (This can result in user frustration and broken screens.)
  • Fitting large titles and many labels in a small number of pixels can be difficult if not impossible.
  • Scrolling issues can be maddening. Sometimes a chart can prevents users from scrolling past it on the page.
  • Since one size often doesn’t fit all, it requires a great deal of effort to make one chart for desktops, one for mobile devices, and one for print.

What’s the end result from all of these usability issues? Oh, not much. Only frustrated employees and customers, irate calls to IT departments and developers, squandered opportunities, and generally poor business decisions.

Bad dataviz never helped anyone.

The begs the question, What to do?

Fortunately, there’s a nifty solution. ZingChart has just released a mobile-chart plugin for its JavaScript charting library. The robust package supports a wide variety of charts, including bar, line, area, scatter, bubble, pie, and ring. Here’s an example:

See the Pen ZingTouch | Pinch&Expand by ZingChart (@zingchart) on CodePen.

Note that you will only see the features if you’re viewing this post on a phone or a tablet.

Feedback

What say you?


This post is brought to you by ZingChart’s JavaScript charting library. The opinions expressed here are my own. The ZingChart folks love charts. Feel free to hit them up for your dataviz project.

philanimated

Navigation

BACKRANDOMNEXT

Filed Under



Enjoy this post? Click here to subscribe to this RSS feed or here to sign up for my bi-monthly newsletter.


Submit a Comment

Your email address will not be published. Required fields are marked *