Responsive charts are a great way to visualize data and communicate insights on the web. However, creating charts that adapt to different screen sizes, devices, and orientations can be challenging. In this article, you will learn some common pitfalls and best practices for responsive charts, and how to avoid or overcome them.
One of the most common mistakes when creating charts is to use fixed dimensions, such as pixels or inches, for the width and height of the chart container. This can result in charts that are too large or too small for the available space, or that get cropped or distorted when the window is resized. To avoid this pitfall, you should use relative units, such as percentages or viewport units, for the chart container, and let the chart library or framework handle the scaling and resizing of the chart elements.
Fixed dimensions should not be considered taboo. Often the best looking graphs use fixed dimensions in at least a few places, but they do need to be updated at each break point to work on each screen size.
As Joe Lissner mentioned, fixed dimensions are not the enemy; a lack of responsive behavior is. In addition to viewport or container queries, we also need to consider line height accommodations (See WCAG Success Criterion 1.4.12). When a user modifies font size or line height, chart displays should scale and realign accordingly so that no content is hidden from view.
Another common pitfall is to try to fit too much information or detail into a single chart, especially on smaller screens. This can result in charts that are hard to read, understand, or interact with, or that lose their meaning or context. To avoid this pitfall, you should simplify your charts by reducing the number of data points, series, axes, labels, legends, or annotations, or by using different chart types or layouts for different screen sizes. You can also use techniques such as tooltips, zooming, filtering, or drill-down to provide more information on demand.
Another optional approach for mitigating this issue is to link to external pages that provide additional clarity or detail on the chart and its data.
A third common pitfall is to create charts that are inconsistent with the rest of the web design, or that change too drastically across different screen sizes. This can result in charts that look out of place, or that confuse or frustrate the users. To avoid this pitfall, you should follow the principles of responsive web design, such as using a fluid grid, flexible images, and media queries, to create charts that match the style, theme, and layout of the web page, and that maintain a coherent and intuitive user experience across different devices and orientations.
Consistency in labeling is also important (see WCAG Success Criterion 3.2.4). This helps avoid confusion when considering the same data points from chart to chart. For example, a data point in one chart labelled as, "Sales from Q2" should not be labelled, "2nd Quarter" in another chart.
One of the best practices for responsive charts is to test and optimize them for different scenarios and conditions. This means not only checking how they look and behave on different screen sizes and devices, but also how they perform in terms of speed, accessibility, usability, and compatibility. You can use tools such as browser dev tools, emulators, simulators, or real devices to test your charts, and use techniques such as code minification, compression, caching, or lazy loading to optimize them.
Another best practice for responsive charts is to use responsive chart libraries or frameworks that can handle most of the complexity and challenges of creating and rendering charts on the web. There are many options available, such as D3.js, Chart.js, Highcharts, or Google Charts, that offer a variety of features, options, and customizations for creating responsive charts. You can also use web components, such as LitElement or React, to create reusable and modular chart components that can be easily integrated into your web design.
A third best practice for responsive charts is to follow data visualization guidelines and best practices that can help you create charts that are clear, accurate, and effective. This means choosing the right chart type for your data and message, using appropriate colors, scales, and labels, avoiding misleading or confusing representations, and providing context and explanation for your charts. You can also use storytelling techniques, such as titles, captions, annotations, or transitions, to make your charts more engaging and informative.
While it's skirted around in some of the bullet points, if you want you charts to be responsive, then they should be designed responsive first. This means all your styling and designs should start around the smallest screen you care about, then as the screen gets bigger, figure out what to move/edit/add/change.