Award-winning author, dynamic keynote speaker, trusted advisor, & workplace tech expert 


Chart Design for Mobile Devices Made Simple

Think that one size fits all with visuals? Think again.
Jul | 12 | 2016


Jul | 12 | 2016

Of 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 above if you’re viewing this post on a phone or a tablet.


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.

Go Deeper


Thoughts on parallels between emerging technologies from last decade and the WFH debate.

Receive my musings, news, and rants in your inbox as soon as they publish.


 Blog E Data E Dataviz E Chart Design for Mobile Devices Made Simple


Comments close 180 days after post publishes.


Blog E Data E Dataviz E Chart Design for Mobile Devices Made Simple

Next & Previous Posts