Patterns for Interactive Line Charts on Mobile Devices

Mobile devices are gaining prominence for a variety of activities. From casual browsing to complex tasks like online shopping and banking, people have started using mobiles for almost everything previously done on a desktop. As more and more tasks are shifting towards mobiles, it has become crucial to redesign desktop elements to fit and function consistently on mobile devices as well. One such element is data visualization. The process of designing visualizations for desktops is fairly matured; however, when it comes to mobile devices there are still a number of challenges faced. Most of these challenges revolve around the limited screen space and fewer conventional mediums of interactions offered by these devices. This paper presents a set of design patterns that help overcome some of the challenges faced when designing data visualizations. These patterns are designed for line charts on mobile devices. However, some of them might apply to other kinds of charts as well. There are four patterns presented in this paper, namely details slider, legend filter, selection brush, and responsive data grid. These patterns can be used either individually or together to help make visualizations more convenient to use on mobile devices.