Responsive Data Chart

Responsive data charts present a challenge in responsive web design. Charts (bar, line, scatter, pie etc.) are often used to aid the interpretation and show patterns in large data sets. In a responsive design, charts may need to change their size or more likely, their format as the user's browser reduces its width and adapts to smaller device sizes.

You may see for yourself how the example adapts to changing browser width. Using your mouse on your desktop view, grab the right side of your browser window and pull to the left, shrinking the size of the window.

The example chart combined with a table or data grid adapts to changing browser width through three stages. First, the desktop (the largest browser width) presents a trend line overlaying a complex sector bar chart. The second (tablet size) is a simpler bar chart. The third (smart phone size) is a pie chart. Note how the table or grid also changes. Many alternative design options are possible and some are illustrated in the Data Grid example.

Design choices are primarily driven by user needs and intended interpretation of the data.

Have a question?Contact Us