All charts

bar/*

Bar

Bar charts — compare discrete categories, vertical or horizontal.

6 variants
@vireya/ui/charts/bar/simple

Single-series vertical bars with rounded tops.

client
@vireya/ui/charts/bar/horizontal

Horizontal bars (layout=vertical) for category ranking.

client
@vireya/ui/charts/bar/stacked

Two stacked series sharing the same stack id + legend.

client
@vireya/ui/charts/bar/grouped

Three side-by-side series per category with shared legend.

client
@vireya/ui/charts/bar/negative

YoY delta with positive/negative bars colour-coded via <Cell> and a zero ReferenceLine.

client
@vireya/ui/charts/bar/bullet

Bullet KPI rows: track bar + thin actual bar (greens vs accent on target hit) + global target line.

client

Understanding Bar charts

Bar charts encode values as the length of rectangular bars, which the human eye compares more accurately than any other visual channel. That makes them the safest default for comparing discrete categories — and the reason they belong on most dashboards before anything fancier.

Vireya's bar family covers vertical and horizontal layouts, grouped and stacked series, signed (positive/negative) values and bullet-style KPI rows, all tokenised so colour-coding follows your theme.

When to use

  • Comparing a value across discrete categories (products, regions, channels).
  • Ranking items — use a horizontal layout so long labels stay readable.
  • Showing change with signed bars around a zero baseline (year-over-year delta).
  • Tracking a metric against a target with a bullet bar.

When to avoid

  • Continuous time-series where a line conveys the trend more cleanly.
  • Too many categories — past ~12 bars, consider a sorted horizontal layout or aggregation.
  • Part-to-whole of a single total with few slices, where a pie can read faster.

Best practices

  • Always begin the value axis at zero; a bar's length is the comparison.
  • Sort bars by value unless the category order is inherently meaningful (e.g. dates).
  • Switch to horizontal bars when category labels are long.
  • Reserve a distinct accent colour for the bar you want the reader to notice.

Accessibility

  • Give each bar an accessible label and value via the tooltip, not colour alone.
  • Maintain sufficient spacing so bars are distinguishable at small sizes.
  • Use colour plus position/labels for positive vs negative bars.

Frequently asked questions

Should bar charts always start at zero?
Yes. A bar communicates value through its length, so truncating the axis exaggerates differences and misleads readers. If small differences matter, use a dot plot or line chart instead of cropping the axis.
Horizontal or vertical bars — which should I pick?
Use vertical bars for a handful of categories or time buckets. Switch to horizontal bars when you have many categories or long labels, since horizontal labels are far easier to read than rotated ones.
What's the difference between grouped and stacked bars?
Grouped bars place series side by side for direct comparison of each series across categories. Stacked bars sum series into one bar to show the total and its composition. Use grouped to compare parts, stacked to compare totals.