The Problem With Many Charts

Shopify’s admin surfaces tell a lot of stories through data visualization, and those stories drive business decisions for merchants and internal teams alike. With more than 10,000 employees, though, it was inevitable that different teams reached for different charting tools. The result was visible inconsistency across the product. Two line charts in the Shopify admin could differ in line width, dash style, legend treatment, background grid, and even whether axis labels or screen-reader support existed. These weren’t merely cosmetic differences—one chart might be accessible while another wasn’t, one printable while another wasn’t.

To address this, the Insights team built Polaris Viz, a React data visualization library that gives other teams a consistent, accessible foundation without requiring them to solve the same problems repeatedly. This post covers how the library implements theming—specifically the shift from a prop-heavy API to a theme-based system that supports light and dark modes, plus custom visual identities.

From Props to Themes

The original Polaris Viz components exposed many style-related options spread across multiple props. Consistent styling meant either wrapping components with the correct values or repeatedly passing the same props. The library needed a simpler contract: developers should be able to pick the default light or dark theme the UX team designed, without the copy-paste overhead.

The solution was to remove the visual style props and introduce a single theme prop on all chart components. The prop accepts the name of a theme from a record of Themes. The Theme type holds all visual configuration—colors, line styles, spacing, and whether bars are rounded. Consumers now get the correct default styles (accessible, on-brand, and consistent) simply by passing theme='Light' if they don’t want the default Dark theme.

Supporting Custom Visual Identities

Default light and dark themes cover most use cases, but not all. Some brands—like Shop, Handshake, or Oberlo—have their own visual identities. Reintroducing style props would recreate the original problem for anyone not using the defaults. Instead, the library needed a centralized way for consumers to define their own theming.

The solution is a context provider called PolarisVizProvider. Instead of chart components reading from a static const record, they pull themes from React context. The provider accepts a themes prop, letting consumers overwrite the Default and Light themes or add entirely new ones.

That flexibility introduces a risk: what if someone overwrites the Default theme but forgets a required property, like the tooltip background color? Two helper functions solve this:

  • createTheme takes a partial theme and returns a complete one, filling missing properties with library defaults.
  • createThemes guarantees the resulting record always contains the Default and Light themes, even if partially overwritten.

With both in place, the PolarisVizProvider can safely merge consumer-supplied themes with the library’s own defaults.

The Base Theme Option

When defining multiple custom themes, duplication becomes an issue. Two themes that differ only in one color would each need the full definition repeated. To solve this, createTheme accepts an optional baseTheme argument. Instead of always starting from the library default, you can create a theme using another theme as the base—for example, using AngryRed as the base for HappyGreen—and only override what’s different.

Per-Series Colors

Theme-based colors work well for whole charts, but sometimes color needs to reflect the meaning of a specific data set. A chart showing sales might use a green gradient to highlight high values (more sales is good), while a chart showing returns might use a red gradient (more returns is bad). Creating a new theme for every such case would be overwhelming.

Instead, the DataSeries type now accepts an optional color that overrides the series color coming from the theme. This keeps theme-level control intact while allowing targeted, data-driven color choices where needed.

What’s Next

Polaris Viz has since been released as an open source project on GitHub, and the team previously offered beta access for testing and feature suggestions. The library reflects a broader approach at Shopify: making the right choice the easy choice by putting visual consistency, accessibility, and theme flexibility into a single, predictable API.