Chart Colors

Overview #

Data visualization is crucial for clear communication, but inconsistent color usage can hinder comprehension and create visual noise. Chart Color Tokens provide a unified, robust, and accessible system for coloring data visualizations across all Dialpad products.

These tokens are designed to:

• Ensure Visual Consistency: Guarantee a cohesive look and feel for data insights.
• Enhance Accessibility: Provide high-contrast, color-blind friendly palettes out-of-the-box.
• Streamline Workflow: Offer a single source of truth for both designers and developers, reducing guesswork and speeding up development.
• Improve Maintainability: Simplify global color updates and future-proof our data experiences.

Types #

Chart Colors are available for one of four types: Single Color, Semantic, Categorical, and Sequential.

Single Color #

Use for data visualizations that only require comparing one or two data points, or a single data point against a series of adjacent neutral data. Use chart.color.accent as the default. To bring a data point to focus, use chart.color.accent for the focused data point and chart.color.neutral for the rest.

When to Use:

• Basic data points.
• Indicating selected chart series or segments.
• Dimming or disabling inactive chart elements.

Semantic #

Apply colors that associate meaning to the data points, such as status, severity, or sentiment.

When to Use:

• Performance Dashboards: Showing status (on-track, at-risk, complete).
• Alerts/Notifications: Highlighting critical data points.
• Sentiment Analysis: Representing positive, neutral, or negative sentiment.
• Brand Alignment: Emphasizing data related directly to Dialpad's core identity.

Categorical #

Apply unique colors to distinguish two or more unrelated data where color carries no meaning. Use in the predetermined numerical order, e.g. 01, 02, etc. This ensures applied data can be visually distinguished from its adjacent data.

When to Use:

• Multi-series bar charts, pie charts, or line charts comparing different groups.
• Visualizing discrete variables (e.g., customer segments, operating systems).

Sequential #

To represent data using progressive shades or tints of a single color, emphasizing their relative depth within a single data series.

When to Use:

• Single-series charts where visual depth or intensity within one category is key.
• Heatmaps or density visualizations for a single metric.
• Situations requiring a strong visual connection to the Dialpad brand.

Sequential Range

Using sequential range tokens enable the ability to dynamically create varying number of color steps for a single data series with start and end tokens.

Sequential Default

The default range are a fixed number of 10 available colors for a single data series. If you need to create fewer or more colors, use the sequential range tokens.

Usage #

Developers #

Apply to chart elements (bars, lines, fills) via CSS Variables (e.g. var(--dp-color-chart-color-accent)) or corresponding CSS Utilities, e.g. d-bgc-chart-neutral, d-bc-chart-warning, etc.

Designers #

• Applying Colors: Apply color directly to chart elements (bars, lines, fills) via Figma Styles linked to tokens. Unlike other Dialtone colors, Chart Colors are not scoped to foreground, surface, border, etc.
• Understanding Hover/Selected: Remember that hover and selected states for specific chart series (single color, semantic, categorical, and sequential) have predetermined contrasting colors, ensuring consistent interaction feedback.
• Prototyping: Use these tokens in your Figma prototypes to demonstrate interactive states and theme switching.

Do and Don'ts #

Use chart colors only for data #

Apply Categorical colors in numeric order #

Limit chart colors #

Use multiple colors only with purpose #

Use space to separate data #

Accessibility Guidelines #

Ensuring accessible data visualizations is a core tenet of Dialtone. When using these tokens:

• Contrast Ratios: All token color combinations are designed to meet WCAG AA contrast standards (minimum 3:1 for graphics/UI components).
• Color-Blindness Compatibility: Palettes have been vetted for common forms of color blindness (e.g., using tools like Viz Palette).
• Redundancy is Key: Never rely solely on color to convey critical information. Always provide supplementary visual cues such as:
  • Labels/Text: Directly annotating data points with values.
  • Icons/Patterns: Using distinct icons or patterns for categories.
  • Shapes/Stroke Styles: Varying shapes, line styles (dashed, dotted), or stroke widths.
• Theming Impact: Token values are specifically defined for both light and dark modes to ensure optimal contrast and readability in any theme.

Known Issues & Troubleshooting #

While this system aims for robustness, be aware of potential challenges during implementation and adoption:

• Charting Library Overrides: Some charting libraries might aggressively override inline styles or custom properties, requiring careful mapping or deeper customization.
• Complex Color Logic: For very custom data-driven color calculations beyond simple references (e.g., dynamic gradients based on data range), you might still need to implement logic in code that consumes these Chart Color design tokens.
• Transitioning Existing Charts: Migrating older charts not using design tokens will require dedicated refactoring effort.