Bar Stacked
A stacked bar chart card with up to four series.
Facturación
Comparativa apilada de entregas, devoluciones, comisión y ShopToShop
Installation
npx shadcn@latest add @ecodeliver/bar-stackedUsage
Each datum has a label plus delivered, received, comissionSales, and optional shopToShop values. Series colors and labels are passed separately.
import { BarStacked } from "@/components/registry/bar-stacked";
export function Example() {
return (
<BarStacked
title="Facturación"
footerText="Comparativa apilada"
data={[
{
label: "1 ene",
delivered: 120,
received: 40,
comissionSales: 30,
shopToShop: 18,
},
]}
firstSeries={{ label: "Entregas", color: "var(--chart-3)" }}
secondSeries={{ label: "Devoluciones", color: "var(--chart-4)" }}
thirdSeries={{ label: "Comisión de ventas", color: "var(--chart-1)" }}
fourthSeries={{ label: "ShopToShop", color: "var(--chart-2)" }}
/>
);
}API Reference
BarStacked
| Prop | Type | Default |
|---|---|---|
title | string | - |
description | string | - |
trendText | string | - |
footerText | string | - |
data | StackedBarDatum[] | - |
firstSeries | { key?: string; label: string; color: string } | --chart-1 |
secondSeries | { key?: string; label: string; color: string } | --chart-2 |
thirdSeries | { key?: string; label: string; color: string } | --chart-3 |
fourthSeries | { key?: string; label: string; color: string } | --chart-4 |
StackedBarDatum
| Prop | Type | Default |
|---|---|---|
label | string | - |
delivered | number | - |
received | number | - |
comissionSales | number | - |
shopToShop | number | - |