Page MenuHomePhabricator

Graphs are not mobile friendly
Open, Needs TriagePublic


I'm not sure if I'm putting this in the right project. Please correct if I've got it wrong.

We're using the graph extension (I think) on a meta page. There are 2 charts that have been generated. Both are too wide for mobile viewing (not responsive) and one of them I can't seem to get to scroll sideways on iPhone 6.

Given the audience for this work, we're committed to mobile-first design and display. It would be great to use the extension if it'll work for this. If not, we can create some images and drop them in.


(Tap image for animation)

Event Timeline

atgo created this task.Apr 19 2016, 6:32 PM
Restricted Application added subscribers: TerraCodes, Aklapper. · View Herald TranscriptApr 19 2016, 6:32 PM

@Yurik Wanted to check in on this. We'll have to stop using the extension if there's no fix in sight.

@atgo, my apologies, I accidentally had blocked all Phabricator notification emails, and only just reenabled them. Graphs must work for mobile, and if they are not, I have to find a way to fix them. Let me see what i can do there. Sadly MediaWiki-extensions-Graph is still my pet project without any formal WMF support, so I will have to do a bit of priorities juggling :)

@JGirault @Jdlrobson @Esanders know much more about mobile rendering and might give a good suggestion - the first graph has this HTML structure. The image gets right-aligned without being able to scroll horizontally.

<div style="float: right">
 <div class="mw-graph" style="min-width:350px;min-height:250px">
  <img class="mw-graph-img" src="/api/rest_v1/page/graph/png/New_Readers%2FResearch_and_stats/15545294/e7d4be07f364b19148190c3a15f6c162dc44679f.png">

Thanks @Yurik! Really appreciate you looking into it. It's a really handy
feature :)

One thing that might be good, which I know is a bigger undertaking that
would likely require more formal WMF design support, is to restyle the
graphs to be more mobile friendly, too. There's some great examples in this
medium post:

jrbs added a comment.Apr 25 2016, 5:48 PM

For what it's worth, I have a couple graphs whose mobile functionality could be tested, interactive and static:

Yurik added a comment.Apr 25 2016, 6:27 PM

@atgo, thanks for the great article, and I agree it is a slightly bigger issue - it's a difference between tooling and use of those tools. The <graph> allows you to pick a canvas rectangle (width x height), and draw anything you want on it. It has no notion of mobile vs desktop, just the pixel size (just like an image really). The html generated from it could be a bit more mobile friendly, allowing proper scrolling, etc, but it is not fundamentally changing anything.

On the other hand, we could design much better graph templates and encourage people to use them, creating a guideline on how to use them for each different use case. But yes, that will be a challenge :)

With regards to graphs on mobile there are 2 things to think about

  1. How it looks on a mobile device
  2. Not shipping too much data / bloating the initial page load
  3. Test on a real device.

I haven't looked too much at graphs but you'll want to make sure an width/float css rules are done in stylesheets via classes rather than inline styles.

In terms of not shipping too much data you'll probably want to serve a jpeg by default that when clicked loads the JavaScript needed to run and makes the graph interactive. You wouldn't want to serve the entire library by default. From a quick glance it looks like you'll doing this.

Practically you'll need to ensure any ResourceLoader modules have 'targets'=>['desktop','mobile' ] if they are designed to work on mobile but you must not do this blindly. Be sure to test on a device and review any libraries to check if they are meant to be used on mobile. If you are using a library in core and it is disabled consider not using it and using something else - there may be a good reason it's not enabled!

In terms of #1, also remember that you cannot know the device width up front. You'll probably want to set width: 100%; height: auto;

For responsive divs maintaining aspect ratio you could use the same CSS I've written for maps:

So, what's the status on fixing these?

Yurik added a comment.Aug 3 2016, 6:58 PM

Not much yet -- could use some help, and I will need to look at it some more once back from vacation.

Yurik added a comment.Dec 21 2016, 6:52 AM

@Esanders @Jdlrobson could you take a look at T147768 to see if the frame implementation would work on a mobile?

TheDJ added a subscriber: TheDJ.Jan 12 2017, 8:33 PM

Some of these problems seem easily fixable with something along the lines of:

@media only screen and (max-width:500px) {
	@supports (object-fit: contain) { {
			width: 100% !important;
			min-width: auto !important;
			min-height: auto !important;
		} canvas, .mw-graph-img {
			width: 100% !important;
			height: 100% !important;
			object-fit: contain;
			max-height: 50vh;
			max-width: 100%;

Although it doesn't work for interactive graphs, since the mouse position for these doesn't seem to take into account the computed width and height, but is looking directly at an attribute or initialization value or something (probably requires fixing the vega JS library).

I'm wondering about those min-width's on mw-graph. Why were they added ?

TheDJ removed Yurik as the assignee of this task.May 17 2017, 11:28 AM
TheDJ added a subscriber: Yurik.

unassigning from yurik, don't think he is actively working no this.

Mhurd added a comment.EditedJun 6 2017, 1:56 AM


I'm wondering about those min-width's on mw-graph. Why were they added ?

Ya on the ticket I just closed as a dupe we were wonder about that and the graph line widths too.

Jdlrobson moved this task from Needs triage to Triaged on the Mobile board.Jul 19 2017, 1:17 AM