Behavior 

Charts provide interaction patterns that give users control over the data displayed. These patterns let users focus on a chart’s specific values or ranges.

The following recommended interaction patterns, styles, and effects (like haptic feedback) can improve user understanding of chart data:

• Progressive disclosure provides a clear path to unveiling details, accessible on demand.
• Direct manipulation allows users to directly act on UI elements, minimizing the number of actions needed on a screen, including: zooming and panning, pagination, and data controls.
• Changing perspective enables one design to work for different users and data types, such as data controls and motion.

Progressive disclosure

Reveal chart details using progressive disclosure, which allows users to view specific data points as needed.READ MORE

Reveal chart details using progressive disclosure, which allows users to view specific data points as needed.

Zooming and panning

Zooming and panning are popular chart interactions that affect how closely users can study data and explore the chart UI. Zooming changes whether the UI…READ MORE

Zooming and panning are popular chart interactions that affect how closely users can study data and explore the chart UI.

Zooming

Zooming changes whether the UI is shown from either nearer or farther away. The device type determines how zooming is performed.

• On desktop, zoom occurs through clicking and dragging, or scrolling
• On mobile, zooms occurs using pinch to zoom

When zooming isn’t the primary action, it can be implemented via clicking and dragging (on desktop) or double tapping (on mobile).

Panning

Panning allows the user to explore the UI that expands beyond the screen. It should be constrained in ways that make sense for the data displayed. For example, if one dimension of a chart is more important than another, the direction of panning can be restricted to only that direction.

The act of panning is often paired with zooming.

On mobile, panning is often implemented via gestures, such as one-finger swiping.