shopify-polaris-viz_skill

This skill helps you build Shopify Polaris Viz charts and themes, enabling accessible, theme-consistent data visualizations in admin dashboards.

HTML

6

GitHub Stars

1

Bundled Files

2 months ago

Catalog Refreshed

4 months ago

First Indexed

Readme & install

Copy the install command, review bundled files from the catalogue, and read any extended description pulled from the listing source.

Installation

Preview and clipboard use veilstrat where the catalogue uses aiagentskills.

npx veilstrat add skill toilahuongg/shopify-agents-kit --skill shopify-polaris-viz

SKILL.md6.1 KB

Overview

This skill guides developers in building data visualizations for Shopify Apps using the Polaris Viz library. It focuses on creating accessible, themeable charts that match the Shopify Admin aesthetic and provides practical guidance for BarChart, LineChart, DonutChart, SparkLineChart, and theming. The content emphasizes design principles, data structures, and integration patterns for consistent, accurate charts.

How this skill works

It explains required setup, including wrapping the app with PolarisVizProvider and importing the library styles. The skill describes the DataSeries format used across components, common props, built-in themes, and how to override styles via the provider. It also details component-specific recommendations (max points, ideal use cases) and accessibility and color guidelines to ensure charts remain readable and meaningful.

When to use it

Building admin-facing charts that must match Shopify Admin visual style
Creating single-question visualizations like trends, comparisons, or part-to-whole breakdowns
Embedding compact inline trends (sparklines) inside lists or cards
Styling charts to match brand themes while keeping Polaris consistency
Needing accessible charts with ARIA attributes and table fallbacks

Best practices

Answer one clear question per chart to keep visuals focused
Keep bar and donut charts to ~6 categories; use tables for larger categorical sets
Limit line charts to 4 series and prefer 30+ points for trend clarity
Provide data tables or text alternatives; do not rely on color alone to convey meaning
Use built-in themes for consistency and override seriesColors in PolarisVizProvider for brand tweaks
Follow Shopify axis formatting (3-letter months/days, 12-hour lowercase times, 'k' number shorthand)

Example use cases

Daily sales comparison across a single week using BarChart
Monthly orders trend across a quarter with LineChart and hover tooltips
Traffic source breakdown via DonutChart for marketing dashboards
Inline product conversion trend using SparkLineChart inside a product list
Cumulative revenue visualization with StackedAreaChart for multi-category reporting

FAQ

Polaris Viz was archived in mid-2025. It remains functional, but for new long-term projects consult Shopify support for migration options and future guidance.

How do I customize chart colors to match our brand?

Provide a custom theme via PolarisVizProvider and set seriesColors (upToEight). You can also pass color on individual DataSeries for per-series overrides.

What is the required data format?

Use the DataSeries format: each series has a name, an array of { key, value } points, optional color, and isComparison flag for greyed historical data.