BarChart Pro

Part of Pro. Versions up to 0.10 of the open source package include it under MIT; later releases keep it in Pro.

Vertical or horizontal bar chart, grouped or stacked: orders by hour, revenue per branch. Zero baseline, negative values, text legend with toggles, tooltip and keyboard navigation.

Jump to API reference

Import

Vue

import { UiBarChart } from '@ziyarago/ui-pro/vue'

24 hours of orders

Orders by hour. Bar chart, 1 series: Orders. Period 00:00 to 23:00. Minimum 0, maximum 37, last value 4.
Category	Orders
00:00	1
01:00	1
02:00	0
03:00	0
04:00	0
05:00	1
06:00	3
07:00	7
08:00	12
09:00	15
10:00	18
11:00	29
12:00	30
13:00	29
14:00	22
15:00	15
16:00	17
17:00	22
18:00	32
19:00	37
20:00	30
21:00	16
22:00	9
23:00	4

Vue

<UiBarChart
  :series="[{ key: 'orders', label: 'Orders', tone: 'brand', values: [{ x: '00:00', y: 1 }, { x: '01:00', y: 1 }, { x: '02:00', y: 0 }, { x: '03:00', y: 0 }, { x: '04:00', y: 0 }, { x: '05:00', y: 1 }, { x: '06:00', y: 3 }, { x: '07:00', y: 7 }, { x: '08:00', y: 12 }, { x: '09:00', y: 15 }, { x: '10:00', y: 18 }, { x: '11:00', y: 29 }, { x: '12:00', y: 30 }, { x: '13:00', y: 29 }, { x: '14:00', y: 22 }, { x: '15:00', y: 15 }, { x: '16:00', y: 17 }, { x: '17:00', y: 22 }, { x: '18:00', y: 32 }, { x: '19:00', y: 37 }, { x: '20:00', y: 30 }, { x: '21:00', y: 16 }, { x: '22:00', y: 9 }, { x: '23:00', y: 4 }] }]"
  label="Orders by hour"
 />

Revenue per branch (grouped)

Bar chart, 2 series: Cash, Card. Period Tashkent to Khiva. Minimum $31 (Cash), maximum $212 (Card), last value $31 (Cash).
Category	Cash	Card
Tashkent	$124	$212
Samarkand	$86	$118
Bukhara	$64	$97
Namangan	$52	$70
Khiva	$31	$44

Vue

<UiBarChart
  :series="[{ key: 'cash', label: 'Cash', tone: 'brand', values: [{ x: 'Tashkent', y: 124 }, { x: 'Samarkand', y: 86 }, { x: 'Bukhara', y: 64 }, { x: 'Namangan', y: 52 }, { x: 'Khiva', y: 31 }] }, { key: 'card', label: 'Card', tone: 'info', values: [{ x: 'Tashkent', y: 212 }, { x: 'Samarkand', y: 118 }, { x: 'Bukhara', y: 97 }, { x: 'Namangan', y: 70 }, { x: 'Khiva', y: 44 }] }]"
  unit="currency"
  currency="USD"
 />

Stacked

Bar chart, 2 series: Cash, Card. Period Tashkent to Khiva. Minimum $31 (Cash), maximum $212 (Card), last value $31 (Cash).
Category	Cash	Card
Tashkent	$124	$212
Samarkand	$86	$118
Bukhara	$64	$97
Namangan	$52	$70
Khiva	$31	$44

Vue

<UiBarChart
  :series="[{ key: 'cash', label: 'Cash', tone: 'brand', values: [{ x: 'Tashkent', y: 124 }, { x: 'Samarkand', y: 86 }, { x: 'Bukhara', y: 64 }, { x: 'Namangan', y: 52 }, { x: 'Khiva', y: 31 }] }, { key: 'card', label: 'Card', tone: 'info', values: [{ x: 'Tashkent', y: 212 }, { x: 'Samarkand', y: 118 }, { x: 'Bukhara', y: 97 }, { x: 'Namangan', y: 70 }, { x: 'Khiva', y: 44 }] }]"
  stacked
  unit="currency"
  currency="USD"
 />

Horizontal

Bar chart, 2 series: Cash, Card. Period Tashkent to Khiva. Minimum $31 (Cash), maximum $212 (Card), last value $31 (Cash).
Category	Cash	Card
Tashkent	$124	$212
Samarkand	$86	$118
Bukhara	$64	$97
Namangan	$52	$70
Khiva	$31	$44

Vue

<UiBarChart
  :series="[{ key: 'cash', label: 'Cash', tone: 'brand', values: [{ x: 'Tashkent', y: 124 }, { x: 'Samarkand', y: 86 }, { x: 'Bukhara', y: 64 }, { x: 'Namangan', y: 52 }, { x: 'Khiva', y: 31 }] }, { key: 'card', label: 'Card', tone: 'info', values: [{ x: 'Tashkent', y: 212 }, { x: 'Samarkand', y: 118 }, { x: 'Bukhara', y: 97 }, { x: 'Namangan', y: 70 }, { x: 'Khiva', y: 44 }] }]"
  orientation="horizontal"
  unit="currency"
  currency="USD"
 />

Days of the week

Bar chart, 1 series: Bookings. Period Mon, Oct 12, 2026 to Sun, Oct 18, 2026. Minimum 41, maximum 88, last value 79.
Category	Bookings
Mon, Oct 12, 2026	41
Tue, Oct 13, 2026	52
Wed, Oct 14, 2026	48
Thu, Oct 15, 2026	63
Fri, Oct 16, 2026	71
Sat, Oct 17, 2026	88
Sun, Oct 18, 2026	79

Vue

<UiBarChart
  :series="[{ key: 'w', label: 'Bookings', tone: 'success', values: [{ x: '2026-10-12', y: 41 }, { x: '2026-10-13', y: 52 }, { x: '2026-10-14', y: 48 }, { x: '2026-10-15', y: 63 }, { x: '2026-10-16', y: 71 }, { x: '2026-10-17', y: 88 }, { x: '2026-10-18', y: 79 }] }]"
 />

Negative values

Bar chart, 1 series: Net cash flow. Period Mon, Jan 5, 2026 to Mon, Mar 23, 2026. Minimum -52, maximum 61, last value 55.
Category	Net cash flow
Mon, Jan 5, 2026	38
Mon, Jan 12, 2026	12
Mon, Jan 19, 2026	-24
Mon, Jan 26, 2026	-52
Mon, Feb 2, 2026	-18
Mon, Feb 9, 2026	27
Mon, Feb 16, 2026	44
Mon, Feb 23, 2026	61
Mon, Mar 2, 2026	-9
Mon, Mar 9, 2026	-31
Mon, Mar 16, 2026	16
Mon, Mar 23, 2026	55

Vue

<UiBarChart
  :series="[{ key: 'net', label: 'Net cash flow', tone: 'success', values: [{ x: '2026-01-05', y: 38 }, { x: '2026-01-12', y: 12 }, { x: '2026-01-19', y: -24 }, { x: '2026-01-26', y: -52 }, { x: '2026-02-02', y: -18 }, { x: '2026-02-09', y: 27 }, { x: '2026-02-16', y: 44 }, { x: '2026-02-23', y: 61 }, { x: '2026-03-02', y: -9 }, { x: '2026-03-09', y: -31 }, { x: '2026-03-16', y: 16 }, { x: '2026-03-23', y: 55 }] }]"
 />

All zeros

No data for this period

Vue

<UiBarChart
  :series="[{ key: 'a', label: 'Orders', values: [{ x: '00:00', y: 0 }, { x: '01:00', y: 0 }, { x: '02:00', y: 0 }, { x: '03:00', y: 0 }, { x: '04:00', y: 0 }, { x: '05:00', y: 0 }] }]"
 />

Empty

No data for this period

Vue

<UiBarChart :series="[]" />

Loading

Vue

<UiBarChart :series="[]" loading />

API reference

Vertical or horizontal bar chart, grouped or stacked, for categories such as days, 24 hours or revenue per branch; same axes, formats and accessibility as LineChart.

Props

PropType and valuesDefaultDescription

seriesrequired

{ key: string; label: string; values: { x: string | number | Date; y: number | null }[]; tone?: 'brand' | 'success' | 'warning' | 'danger' | 'info' | 'neutral'; dashed?: boolean }[]

—One entry per bar series. x is the category (string, number or Date); categories keep their order of first appearance, dates are sorted. Negative values draw below the zero line.

orientationverticalhorizontal'vertical'Horizontal puts the categories on the left (right in RTL) and grows with the number of categories.

stackedbooleanfalseStacks the series of a category (positives and negatives stack apart) instead of placing them side by side; the tooltip adds a total.

unitcountcurrencypercent'count'Number format of the value axis, tooltip and legend. count: grouped digits, compact on the axis (1.2k, 1.2M, localized by Intl); currency: needs currency; percent: values are percent points (12 means 12%).

currencystring—ISO 4217 code for unit="currency", for example UZS, SAR or USD. The axis stays compact without the symbol; tooltip and legend show the full amount.

yFormat(n: number) => string—Custom formatter for every number (axis, tooltip). Overrides unit and currency.

localestring—BCP 47 tag for numbers and dates, for example "ar" or "uz-UZ". Defaults to the kit locale (en ru uz ar tr and the rest). An RTL language also mirrors the chart.

dirltrrtl—Text direction. Defaults to the direction of the page (RTL mirrors the axis, the plot and the tooltip).

labelstring—Accessible name, for example "Revenue". The generated summary (series, period, minimum, maximum, last value) follows it in the aria-label.

heightnumber—Chart height in px (without the legend). Overrides size. Horizontal bars grow with the number of categories when it is not set.

sizexssmmdlgxl'md'Preset height: xs 140, sm 180, md 240, lg 320, xl 400 px.

loadingbooleanfalseShows a skeleton in the shape of the chart.

emptyTextstring—Text of the empty state. Default is the translated "No data for this period".

emptyIconstring—Icon name shown above the empty text. None by default.

legendboolean'true when there is more than one series'Text legend of toggle buttons (aria-pressed). A button hides and shows its series; the scale is recomputed.

yMinnumber—Fixed lower end of the value axis.

yMaxnumber—Fixed upper end of the value axis.

Events

Vue: @name. React: onName.

pointClickClick or Enter on a point. Called with { seriesKey, series, index, x, label, y }: the series under the pointer (or the keyboard series), the index in the shared x list, the original x value, its formatted label and y.

legendToggleA legend button was pressed. Called with { key, label, hidden } where hidden is the new state.

Notes

Pure inline SVG, no dependencies. Colors come from the --zg-chart-* tokens (light, dark, gold and tamam), so there is nothing to configure per theme.
Empty data (no points, only null values, or only zeros for bars and donut) shows the empty state instead of an axis of zeros. A null y is a gap in the line, never a zero. All values equal: the axis starts at 0 and leaves headroom.
Accessibility: the plot is one focusable role="img" with a generated aria-label, a visually hidden data table, and a live region that reads the point while you move. Keys: Left and Right (mirrored in RTL) move between points, Up and Down between series, Home and End jump, Escape hides the tooltip, Enter fires pointClick.
The chart fills the width of its container (ResizeObserver, client only) and renders at 640 px on the server.