@shopify/polaris-viz

Polaris Viz

Polaris Viz is a data visualization React component library. It was built to help Shopify merchants better understand their data.

Installation

Run the following command using npm:

npm install @shopify/polaris-viz --save

If you prefer Yarn, use the following command instead:

yarn add @shopify/polaris-viz

Usage

If your app is set up to consume esnext builds, import components where you want to use them and the styles will automatically be applied.

If your app is not set up for esnext, import the styles where you import components from the library:

import '@shopify/polaris-viz/styles.css';

Components

Components inherit their sizes from their containers, so place your component inside an element with a width and height specified.

Viz	Use cases	Props
Normalized stacked bar chart	Used for positive datasets with two to four items. If your dataset has more than four items, consider grouping the fourth item and the remainder into an “other” category before passing data to the component.	data (required): {formattedValue: string, value: number, label: string}[] accessibilityLabel: string size: small | medium | large orientation: vertical | horizontal colors: colors[] | ColorScheme
Sparkline	Used in small sizes to give an overview of how a metric has performed over time.	data (required): {x: number, y: number}[] accessibilityLabel: string color: Color useAnimation: boolean includeArea: boolean
Line chart	Used to show change over time, comparisons, and trends.	series (required): Series[] data (required): {x: string, y: number}[] name (required): string xAxisLabels: string[] formatY: (value: number): string; style (all properties optional): color: Color lineStyle: 'dashed' | 'solid' chartHeight: number formatYAxisValue: (value: number): string;
Bar chart	Shows comparison across categories.	data (required): {rawValue: number; label: string;}[] barMargin: Small | Medium | Large | None accessibilityLabel: string color: Color highlightColor: Color formatYValue:(value: number): string; formatXAxisValue:(value: number, index: number): string;
Grouped bar chart	Shows comparison of different types, across categories.	series (required): {data: number[]; color: Color; label: string;}[] labels (required):string[] timeSeries: boolean accessibilityLabel: string formatYValue:(value: number): string; chartHeight: number

Contributing

Pull requests are welcome.

Licenses

• Source code is under a custom license based on MIT. The license restricts Polaris Viz usage to applications that integrate or interoperate with Shopify software or services, with additional restrictions for external, stand-alone applications.