# Ecommerce charts

> Store analytics drawn in plain SVG and HTML — revenue area, orders by channel, conversion funnel and top products — that draw in, spring between periods and explain every point on hover or arrow keys.

- Collection: Examples
- Tier: pro
- Docs: https://geturui.com/docs/ecommerce-charts
- Install: `npx shadcn@latest add @geturui-pro/ecommerce-charts`
- Dependencies: motion, lucide-react

## Variants

### Revenue area

Net revenue as a volt area over the previous period, with 7D, 30D and 12M tabs that spring-morph the curve, counting totals and a crosshair tooltip.

Install: `npx shadcn@latest add @geturui-pro/ecommerce-charts-revenue-area`

```tsx
import { RevenueAreaChart } from "@/components/examples/ecommerce-charts/revenue-area";

export function Revenue() {
  return (
    <RevenueAreaChart
      currency="EUR"
      periods={[{ key: "7D", labels, revenue, previous, orders }]}
      defaultPeriod="7D"
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | "Net revenue" | Card heading. |
| periods | `RevenuePeriod[]` | — | { key, labels, revenue, previous, orders } per tab. Keep the point count equal across periods so the curve can morph. |
| defaultPeriod | `string` | "30D" | Initially selected tab key. |
| currency | `string` | "USD" | ISO currency for formatting. |
| className | `string` | — | Extra classes on the card. |

### Orders by channel

Weekly orders stacked by channel on a neutral-to-volt ramp; bars grow in, flip between counts and share with a spring, and break down per week on hover or arrows.

Install: `npx shadcn@latest add @geturui-pro/ecommerce-charts-channel-stacked`

```tsx
import { ChannelStackedBars } from "@/components/examples/ecommerce-charts/channel-stacked";

export function Channels() {
  return (
    <ChannelStackedBars
      labels={["W1", "W2", "W3", "W4"]}
      channels={[
        { id: "web", label: "Online store", values: [410, 438, 466, 512] },
        { id: "amz", label: "Marketplaces", values: [228, 241, 252, 289] },
      ]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | "Orders by channel" | Card heading. |
| labels | `string[]` | — | One label per bar. |
| channels | `Channel[]` | — | { id, label, values } ordered most to least important; the first gets volt. |
| defaultMode | `"count" | "share"` | "count" | Start with absolute orders or percent of total. |
| className | `string` | — | Extra classes on the card. |

### Conversion funnel

Centred funnel bars joined by tapered connectors with drop-off between steps; device tabs spring every width and the selected step reads its step and overall rate.

Install: `npx shadcn@latest add @geturui-pro/ecommerce-charts-conversion-funnel`

```tsx
import { ConversionFunnelCard } from "@/components/examples/ecommerce-charts/conversion-funnel";

export function Funnel() {
  return (
    <ConversionFunnelCard
      steps={["Visits", "Product views", "Carts", "Purchases"]}
      segments={[{ key: "All", counts: [12000, 7400, 2100, 840] }]}
    />
  );
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | "Store conversion" | Card heading. |
| steps | `string[]` | — | Step names, top of funnel first. |
| segments | `FunnelSegment[]` | — | { key, counts } per tab, one count per step. |
| defaultSegment | `string` | "All" | Initially selected segment. |
| range | `string` | "Last 30 days" | Time range caption. |

### Top products

Best sellers as ranked bars that grow in with counting values; switching between revenue and units re-ranks the rows with a layout spring.

Install: `npx shadcn@latest add @geturui-pro/ecommerce-charts-top-products`

```tsx
import { TopProductsBars } from "@/components/examples/ecommerce-charts/top-products";

export function BestSellers() {
  return <TopProductsBars products={products} defaultMetric="units" range="This week" />;
}
```

| Prop | Type | Default | Description |
|---|---|---|---|
| title | `string` | "Top products" | Card heading. |
| products | `TopProduct[]` | — | { id, name, category, revenue, units, change }. |
| defaultMetric | `"revenue" | "units"` | "revenue" | Metric used to rank rows. |
| currency | `string` | "USD" | ISO currency for revenue. |
| range | `string` | "Last 30 days" | Time range caption. |

## Accessibility

- Every chart has role="img" with a written summary, and the plot is a focusable group: left and right arrows move the crosshair while a polite live region reads the values.
- Period, segment and metric switches are real buttons with aria-pressed; funnel steps are buttons that also move with up and down arrows.
- Reduced motion skips the draw-in, morphs and count-ups and renders the final state immediately.

## Source

Pro item — send `Authorization: Bearer <registry token>` to include the source.