Creating a React Library for Consistent Data Visualization

Summary

Shopify found that teams across its more than 10,000 employees used different visualization tools, producing inconsistent chart styling and differing accessibility and print behavior. The Insights team built Polaris Viz, a React library intended to provide shared, accessible defaults while reducing repeated configuration, and focused this work on light and dark themes plus consumer-defined visual identities. The library replaces numerous visual-style props with a theme prop, stores themes through PolarisVizProvider, and uses createTheme to fill partial definitions with defaults and createThemes to preserve Default and Light themes. Themes can inherit from other themes, while a DataSeries colour can override theme series colors for dataset-specific gradients without creating additional themes. Polaris Viz was subsequently released as an open-source project.

Context

Different Shopify teams used different visualization libraries and configuration patterns, resulting in inconsistent chart appearance, accessibility, and print behavior. Even components using Polaris Viz could diverge because visual-style options were spread across many props and had to be repeatedly supplied.

Approach / What changed

Polaris Viz centralizes chart styling through named themes, a PolarisVizProvider, and theme-construction helpers. createTheme fills partial themes with default values, createThemes preserves the Default and Light themes, and themes can inherit from a base theme. DataSeries also accepts an optional colour for dataset-specific overrides.

Takeaways

• The theme prop replaces numerous visual-style props, allowing charts to use centralized Light or Dark configurations instead of repeated styling values.
• PolarisVizProvider lets applications overwrite default themes or add named themes that individual charts can select.
• DataSeries colour overrides support data-dependent gradients without requiring a separate theme for every series-specific color treatment.

Related reading