Stacked Bar

Horizontal 100 percent stacked bar splitting a total into colored segments with a wrapping legend of labels and percentages.

Traffic by device9,420 sessions
  • Mobile58%
  • Desktop32%
  • Tablet8%
  • Other2%

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Dashboard23 } from "@/components/beste/piece/dashboard23";

<Dashboard23
  title="Traffic by device"
  total="9,420 sessions"
  segments={[
    {
      "label": "Mobile",
      "value": 58
    },
    {
      "label": "Desktop",
      "value": 32
    },
    {
      "label": "Tablet",
      "value": 8
    },
    {
      "label": "Other",
      "value": 2
    }
  ]}
/>