Data Visualization

Overview

Designing data visualizations requires more than just choosing the right highchart type—it’s about crafting experiences that help users interpret information quickly, clearly, and confidently.

American Express has an enterprise developer license for Highcharts, an interactive SVG-based charting library in dls-data-visualization.css within the dist/styles folder that you should include in your stylesheets. Highcharts.js is available via CDN and through script-supplier.

---

What’s New

1. Introducing new naming convention of our color palette.
2. All colors are now tokens.
3. Introducing patterns.

---

Core principles

The following principles are core to creating effective and reliable visualizations across our products:

Clarity: Make The Insight Obvious

Data should be presented clearly and without distortion to eliminate confusion and highlight what matters most.

What this means:

• Choose the simplest chart type that fits the goal
• Use labels, annotations, and legends thoughtfully
• Remove visual noise—gridlines, extra colors, unnecessary elements
• Prioritize data legibility over decoration

Ask yourself:

Can a user understand the takeaway in under 5 seconds?

Consistency: Build Trust Through Visual Reliability

Use standardized tokens, colors, patterns, styles and interactions to make charts predictable and cohesive across experiences.

What this means:

• Apply chart color tokens from the design system
• Reuse familiar layouts and labeling conventions
• Align axis placement, spacing, and typography with UI guidelines
• Treat similar data the same way, visually and interactively

Ask yourself:

Does this chart feel like it belongs with the rest of the product?

Accessibility: Design For Everyone

Visualizations must be inclusive of all users, regardless of ability or environment.

What this means:

• Never rely on color alone—use labels, patterns, and tooltips
• Ensure contrast meets WCAG 2.1 AA standards
• Support keyboard navigation and screen readers for interactive charts
• Offer raw data tables or summaries as alternatives

Ask yourself:

Can this chart be understood by someone with low vision or color blindness?

Responsiveness: Adapt With Intention

Visualizations should adapt to various screen sizes and assistive technologies.

What this means:

• Prioritize readibility on small screens
• Hide or collapse non-essential details on mobile
• Maintain touch-friendly interactions for mobile and tablet users
• Avoid overloading space-limited views with dense data

Ask yourself:

Does the chart still work when viewed on a phone, tablet, or embedded card?

---