By Matt Rae
With Scroll Groups in Adobe XD, large data tables and charts don't have to stop at static representations. They can include rich scrolling interactions to communicate the full story. This tutorial will teach you how to integrate scroll groups into your own charts and tables within XD. To follow along, download the starter file.
Opening the starter file will reveal a dashboard design including several charts and tables from the dashboard UI Kit. All the graphs and elements within this design or what would typically be found in a dashboard or analytics interface design.
The line chart at the top of the page includes a set of data spanning six months on the axis. However, the desired result is to have about three months visible and allow the content to be scrolled into view as desired. To do this, layers need to be structured to ensure the right elements are contained within the scrolling area. In this case, the line charts and data points along with the x axis labels all need to scroll. Since this chart has horizontal and vertical grid lines, these should be included as well.
With the desired scrolling elements selected create a new group and call it scroll content or something similar to denote this as the group of content that should scroll.
Next, extend the graph content by clicking and dragging on the right side of the group. Responsive resize will reposition elements and calculate the alignment while this done. With the scroll content group still selected, enable the horizontal scroll group option in the Property Inspector. Once enabled, two blue handles will appear on the group representing the scrolling viewport; drag the handles into place. The chart can now be scrolled horizontally in preview mode by holding shift and scrolling on a scroll wheel or using two fingers to swipe on a trackpad.
Moving on to the next table on the page. This is a data table including several clothing products. The list can be turned into a scrolling table while keeping the header of the table fixed. Start by double-clicking into the content of the table to find the repeat grid element containing table rows. The repeat grid allows for easy duplication of content. Click and drag the bottom handle until the desired number of table rows are present. This dashboard card has padding enabled allowing the card to resize as the repeat grid is expanded. With the repeat grid still selected a scroll group will once again be enabled in the Property Inspector. This time, however, the vertical scroll group will be enabled and the blue handles will appear at the top and the bottom of the group rather than the left in the right. Position the top blue handle align to the bottom edge of the table header and drag the bottom blue handle so that the card background aligns with the adjacent card element. The table can now be scrolled in preview mode by mousing over the table rows and using the scroll wheel or a trackpad.
When working with larger data sets there are many cases where columns are needed to monitor various forms of information. In these situations, allowing a table to scroll horizontally while fixing a column or multiple columns can be valuable for allowing users to see all the data without losing context of line items. To create a frozen column, the table needs to be constructed in a unique way. Creating a separation between the two be frozen column and the remainder of content. Using the frozen column table at the bottom of the page, notice that the columns are divided into two groups already. The first is the frozen column group called "Frozen column", and the second is the scrollable columns. The second group overlaps the width of the table because there's too much data to include in this current layout. A divider has also been added as a visual separation of column widths.
To make this table scrollable, simply select the scrollable columns group, and once again enable a horizontal scroll group from the property inspector on the right. The table can now be scrolled horizontally in preview mode, though the last column of content appears to be stuck right at the edge of the table. This is because there is no background asset and the group is only as wide as the text content within it. There are a couple ways to fix this. The easiest method is to simply enable padding on the scrollable columns group. Double-click into the scroll group to select the scrollable columns group. In the Property Inspector on the right enable padding. To create space on the right-hand side of the group. The right padding should be increased. With padding added the table content should now scroll horizontally within the table view while maintaining the initial column in a frozen state.
Location widgets are a common feature on dashboards, and a great way of showing "g" location-based information in an interface. Depending on the geographic range of the data. the map may need to be zoomed to a level in which not all content is visible unless the map is panned around. Creating this interaction is now straightforward thanks to scroll groups in Adobe XD.
In the map widget on the right, there is both a list of locations and a map with the associated pins displayed. To make this map pannable, start by selecting the map group containing the vector map and the associated pins. Next, enable the horizontal and vertical scroll group in the Property Inspector on the right to enable panning functionality on this group. Adjust the blue handles once again to fit the boundaries where the map should be visible. In this case align them to the left and the right of the list.
At this point the map won't scroll very much as it is about the same size as the scroll area. To fix that click into the scroll group and select the map group once again. Now resize the group to about two times its original size. Finally, position the map in the center of the scroll group or in the desired starting position. Now preview the design. The map can now be panned by clicking and dragging around the map area from preview mode, or on one axis at a time, by using the scroll wheel on a mouse.
Just like that this dashboard has been brought to life with a variety of rich interactions. Create Scrolling Tables and Charts with Scroll Groups. In this tutorial, Designer Advocate Matt Rae will teach you how to bring charts and tables to life with interactive scrolling using Scroll Groups in Adobe XD.
With Scroll Groups in Adobe XD, large data tables and charts don’t have to stop at static representations, they can now include rich scrolling interactions to communicate a more complete story. In this tutorial, Designer Advocate Matt Rae will teach you how to integrate scroll groups into your own charts and tables within XD. Follow along with the included starter file and transform a dashboard design into a rich interactive prototype.
Starting with a complex line chart with a scale larger than the available chart space, scroll groups will be applied to horizontally scroll the graph, making the extra data points visible. You’ll also learn how to create vertically scrolling tables with fixed headers by converting a repeat grid into a scrolling group. A horizontal and vertical scroll group can be applied to map areas to create scrolling maps as well, paired with scrollable list views for showing associated location data.
Finally this tutorial will explore more complex chart designs by creating a fixed column scrolling table which is helpful in robust analytics and admin dashboard designs. Using scroll groups, bring a large data set to life with a horizontally scrolling table that can be interacted with using the scroll of a mouse wheel or panning on a multi-touch trackpad. The best part is, all of these interactions are contained within a single artboard and can be stored in reusable components allowing charts and tables to be reused across many artboards.
Steer away from static table and chart designs by making use of the power of Adobe XD’s Scroll Groups feature nested within tables and charts in a dashboard design. Scroll groups also support component state functionality making it easy to add interactivity like hovers and click actions directly in the scrolling areas of charts and tables. Bring your charts and tables to life in Adobe XD.
