Horizontal bar chart

Single-series horizontal bar chart for long category labels and ranked bars.

bar-horizontal is the same encoding as a vertical bar chart turned on its side — categories run down the left, bars extend to the right. It honours sort, sortMode, valueLabels, and valueLabelPosition. The alias horizontal-bar is registered against the same renderer.

When to use

• Category labels are long (country names, survey responses, product names)
• Ranking displays — high-to-low from top to bottom reads intuitively
• Mobile-friendly layouts — horizontal bars grow vertically, adapting to narrow screens

When NOT to use

• Time-based data (the horizontal axis conventionally represents time — use line)
• A handful of categories with short labels — bar-vertical is more compact

Example

chart bar-horizontal {
  title = "Japan leads in life expectancy while the US lags behind"
  description = "Selected countries, years (2023)"
  source = "World Bank"
  sourceUrl = "https://data.worldbank.org"
  note = "Figures are estimates and may differ from national statistics"
  sort = descending
  colors = "#59a14f"
  horizontalLabelPosition = off
  horizontalGridStyle = none

  colorize "United States" {
    color = "#e15759"
  }

  data {
    "Japan" = 84.8
    "Switzerland" = 83.8
    "Australia" = 83.5
    "Sweden" = 83.1
    "Canada" = 82.7
    "France" = 82.5
    "Germany" = 81.4
    "United Kingdom" = 81.2
    "United States" = 78.5
    "China" = 78.2
  }
}

Properties

Every property bar-horizontal accepts, beside the frame and layout keys every chart shares. Anything absent from this table is rejected by validateChart and ignored by the renderer.

Property	Type	Default
colors	colors	(unset)
colorPalette	select, see Palettes	Blueprint
autoContrast	boolean	false
allowDarkMode	boolean	true
swapLabelValue	boolean	false
barBackground	boolean	false
barSeparators	boolean	false
barGap	text	60
connectedColumns	boolean	false
connectionsOpacity	text	0.15
waterfall	boolean	false
waterfallTotal	boolean	false
categoryLabelLine	boolean	false
showVerticalAxis	boolean	true
verticalAxisDirection	select: left, right	left
showVerticalTicks	boolean	false
verticalLabelPosition	select: auto, inside, outside, off	auto
verticalGridStyle	select: solid, dashed, dotted, none	none
verticalNumberFormat	numberFormat	(unset)
showHorizontalAxis	boolean	false
showHorizontalTicks	boolean	false
horizontalLabelPosition	select: auto, inside, outside, off	off
horizontalLabelRotation	select: auto, horizontal, vertical	horizontal
horizontalGridStyle	select: solid, dashed, dotted, none	none
horizontalNumberFormat	numberFormat	(unset)
horizontalScaleType	select: linear, log	linear
horizontalRangeMin	text	(unset)
horizontalRangeMax	text	(unset)
valueLabels	boolean	true
valueLabelPosition	select: auto, outside, inside	auto
tooltips	boolean	false
crosshair	boolean	false
crosshairDirection	select: both, vertical, horizontal	both
crosshairStyle	select: solid, dashed, dotted	dashed
crosshairColor	text	#999

Common pitfalls

• Forgetting to sort — an unranked horizontal bar chart loses most of its power
• Mixing the horizontal axis with time, which reads as a flipped line chart
• Long labels still cause issues at very narrow widths; truncate or shorten before publishing

Related types

• bar-vertical — when labels are short and you have room horizontally
• bar-stacked — when each bar should break down into segments
• bar-split — when values can be positive or negative

See also

• Choosing the right chart
• Design principles