Creating Crisp Charts for Mobile

Plotly
Plotly
Published in
4 min readJun 20, 2017

According to comScore’s 2017 U.S. Cross-Platform Future in Focus, as of December 2016, 69% of digital media is consumed via a smartphone or tablet, with the remaining 31% going to desktop computers.

This is in stark contrast to data from late 2013, when the smartphone/tablet vs desktop media consumption battle was very nearly 50%/50%.

Amidst the height of the digital age, sharp mobile graphics are more critical than ever.

So the next time you’re building a Plotly masterpiece, consider using our new “mobile” graph feature. It’s super easy and will ensure that your graphs look as fly on mobile as they will on the 100 inch big screen.

What You Don’t Want Your Graph to Look Like

While the above graph looks fantastic on a laptop or desktop, that’s just a small segment of the potential viewers. Without being touched up using Plotly’s mobile tool, the graph looks about as bad as Donald’s decisions around global warming. Okay, maybe not that bad, but check this out:

But no stress, because in a few screenshots we’ll show you how to finesse that mess into something that’s sure to impress…

  1. Under the style dropdown, select “Mobile.”

2. In the “Mobile” menu, select “add a view.”

3. Within your “new (mobile) view,” change the max width. Bear in mind that most mobile devices have a width of 480px or less.

4. Under the style dropdown, select “Layout” then “Canvas.” Make sure your canvas size is set to “Custom” and that your view is “View 1.” Then, change the width of your graph to the same size that you specified in step 3.

5. You’ll notice that our previously added notes look horrid. For crisp graphs on mobile, get rid of them.

6. Back in the “Layout” menu now, we’ve changed the “title and fonts” size. We’ve also erased or significantly shortened our axis labels.

7. You can adjust the “Margins and Padding” to best suit your graph. Typically, 50–50–25–25–0 looks the best on mobile, as pictured below.

8. You’re done. Look how sharp the mobile version looks now, along with an equally sharp desktop version.

But what happens if you tilt your mobile device horizontally to get a better view of a graph?

Watch how responsive Plotly graphs are to such a change 🔮

Plotly is built by computational scientists with degrees and research expertise from McGill, Harvard, Stanford, and other world-class institutions. Making no-compromise open-source software for scientific visualization is our full-time job and passion. Want to support our work? Consider purchasing a Pro plan. For less than half the cost of a Tableau license, you’ll get support from our engineering staff and time-saving ways to save and share your work with colleagues, advisors, or managers.

Pro Plans for University students and instructors ($59/year)

Pro Plans for industry users ($396/year)

--

--

Plotly
Plotly
Editor for

The low-code framework for rapidly building interactive, scalable data apps in Python.