SegBar

Stacked segmented bar with a legend, for shares of a total. The size prop (xs, sm, md, lg, xl) sets the bar height.

Import

Vue

import { UiSegBar } from '@ziyarago/ui/vue'

Empty

Vue

<UiSegBar :segments="[]" />

Booking sources

Website · 52Agents · 28Mobile · 14Walk-in · 6

Vue

<UiSegBar
  :segments="[{ label: 'Website', value: 52 }, { label: 'Agents', value: 28 }, { label: 'Mobile', value: 14 }, { label: 'Walk-in', value: 6 }]"
 />

Custom colors

Paid · 70Pending · 20Overdue · 10

Vue

<UiSegBar
  :segments="[{ label: 'Paid', value: 70, color: 'var(--zg-green)' }, { label: 'Pending', value: 20, color: 'var(--zg-amber)' }, { label: 'Overdue', value: 10, color: 'var(--zg-red)' }]"
 />

Sizes

Website · 52Agents · 28Mobile · 14

Vue

<UiSegBar
  :segments="[{ label: 'Website', value: 52 }, { label: 'Agents', value: 28 }, { label: 'Mobile', value: 14 }]"
  size="xs"
 />

<UiSegBar
  :segments="[{ label: 'Website', value: 52 }, { label: 'Agents', value: 28 }, { label: 'Mobile', value: 14 }]"
  size="sm"
 />

<UiSegBar
  :segments="[{ label: 'Website', value: 52 }, { label: 'Agents', value: 28 }, { label: 'Mobile', value: 14 }]"
  size="md"
 />

<UiSegBar
  :segments="[{ label: 'Website', value: 52 }, { label: 'Agents', value: 28 }, { label: 'Mobile', value: 14 }]"
  size="lg"
 />

<UiSegBar
  :segments="[{ label: 'Website', value: 52 }, { label: 'Agents', value: 28 }, { label: 'Mobile', value: 14 }]"
  size="xl"
 />

API reference

Single stacked bar split into proportional segments with a legend, for distributions.

Props

PropType and valuesDefaultDescription

segmentsrequired{ label: string; value: number; color?: string }[][]Segments; widths are value / sum of values. color is any CSS color; the default cycles brand, sky, green, amber, red.