Create Horizontal Bar chart

Everything you need to know to create the chart you want.

Overview

Bar charts flip columns horizontally, making them perfect for ranked comparisons or long category labels. They emphasise relative length, aiding quick scanning. Use more than one series of data to get stacked version of Horizontal bar chart.

When to use it

• Ranking items (top customers, feature usage).

• Displaying categories with long text labels.

• Comparing up to 10–12 categories without overwhelming the viewer.

Avoid bar charts when you need to show time-based trends—choose line or column charts instead.

Data requirements

• One or more numeric series.

• Categories can be categorical or ordered.

• Works best when sorted (ascending or descending) for readability.

Style options available

Group	Control	Input type	Options	Description
Colors	Color palette	palette	—	Palette applied to series; sets the default colours for the chart.
General → Bars	Margin between bars (0...1)	number	—	Relative gap between bars inside one category (0 = touching, 1 = wide spacing).
General → Bars	Round bars, px	number	—	Radius applied to round off bar or column corners (in pixels).
General → Bars	Corners to round	select	end, all	Defines radius for rounding column or bar corners in pixels.
General → Bars	Color each column	boolean	—	Assigns a unique colour to every column instead of sharing a palette per series.
General → Bars	Margin between stacked bars	number	—	Gap between stacked series blocks when columns are grouped.
General → Data labels	Show data labels	boolean	—	Shows numeric labels directly on data points.
General → Data labels	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
General → Data labels	Font name	text	—	Font family used for titles, labels, or legend text.
General → Data labels	Font style	text	—	Font weight or style (e.g., bold, italic).
General → Data labels	Font size	number	—	Font size in pixels for the selected text element.
General → Data labels	Font color	color	—	Colour of the text shown for this element.
Axes → X Axis	Show X Axis	boolean	—	Shows or hides the X axis line, ticks, and labels.
Axes → X Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → X Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → X Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → X Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → X Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → X Axis	Allow labels to overlap	boolean	—	Allows labels to render even if they collide instead of hiding them automatically.
Axes → X Axis	Show every n'th label	number	—	Skips labels so only every nth label is drawn.
Axes → X Axis	Rotation of labels	number	—	Rotation angle applied to axis or data labels in degrees.
Axes → X Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → X Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Y Axis	Show Y Axis	boolean	—	Shows or hides the Y axis line, ticks, and labels.
Axes → Y Axis	Base line width	number	—	Thickness of the axis baseline line in pixels.
Axes → Y Axis	Grid line width	number	—	Thickness of gridlines in pixels.
Axes → Y Axis	Base line color	color	—	Colour of the axis baseline line.
Axes → Y Axis	Grid line color	color	—	Colour for gridlines drawn across the chart background.
Axes → Y Axis	Grid line style	select	Solid, ShortDash, ShortDot, ShortDashDot, ShortDashDotDot, Dot, Dash, LongDash, DashDot, LongDashDot, LongDashDotDot	Line pattern used for gridlines (solid, dashed, dotted, etc.).
Axes → Y Axis	Tick width	number	—	Thickness of tick marks in pixels.
Axes → Y Axis	Tick length	number	—	Length of the tick marks in pixels.
Axes → Y Axis	Tick color	color	—	Colour of the axis tick marks.
Axes → Y Axis	Labels alignment	select	left, center, right	Horizontal alignment of axis labels relative to the tick mark.
Axes → Y Axis	X offset	number	—	Horizontal offset applied to axis labels.
Axes → Y Axis	Y offset	number	—	Vertical offset applied to axis labels.
Axes → Y Axis	Type	select	category, linear, logarithmic, datetime	Sets the vertical axis scale (category, numeric, logarithmic, or datetime).
Axes → Y Axis	Opposite side	boolean	—	Positions the axis on the opposite side of the chart (top/right).
Axes → Y Axis	Margin for title	number	—	Space between the axis title and the axis labels/ticks.
Axes → Common	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Common	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Common	Font size	number	—	Font size in pixels for the selected text element.
Axes → Common	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	Font name	text	—	Font family used for titles, labels, or legend text.
Axes → Axes titles	Font style	text	—	Font weight or style (e.g., bold, italic).
Axes → Axes titles	Font size	number	—	Font size in pixels for the selected text element.
Axes → Axes titles	Font color	color	—	Colour of the text shown for this element.
Axes → Axes titles	X Axis margin	number	—	Extra padding around the X axis labels for titles.
Axes → Axes titles	Y Axis margin	number	—	Extra padding around the Y axis labels for titles.
Legend → Main	Show legend	boolean	—	Shows or hides the legend box.
Legend → Main	Horizontal align	select	left, center, right	Horizontal alignment for the legend box (left, centre, right).
Legend → Main	Vertical align	select	top, middle, bottom	Vertical alignment for the legend box (top, middle, bottom).
Legend → Main	Layout	select	horizontal, vertical, proximate	Orientation of the legend items (horizontal row, vertical column, or proximate).
Legend → Additional	Margin for legend	number	—	Outer margin around the legend box.
Legend → Additional	Margin top for items	number	—	Top padding inside the legend between items.
Legend → Additional	Margin bottom for items	number	—	Bottom padding inside the legend between items.
Legend → Additional	Distance between items	number	—	Horizontal spacing between legend entries.
Legend → Style	Font name	text	—	Font family used for titles, labels, or legend text.
Legend → Style	Font style	text	—	Font weight or style (e.g., bold, italic).
Legend → Style	Font size	number	—	Font size in pixels for the selected text element.
Legend → Style	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart title	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart title	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart title	Font color	color	—	Colour of the text shown for this element.
Title → Chart title	Margin bottom	number	—	Extra space below chart titles or subtitles in pixels.
Title → Chart subtitle	Font name	text	—	Font family used for titles, labels, or legend text.
Title → Chart subtitle	Font style	text	—	Font weight or style (e.g., bold, italic).
Title → Chart subtitle	Font size	number	—	Font size in pixels for the selected text element.
Title → Chart subtitle	Font color	color	—	Colour of the text shown for this element.

Have problems or want to improve this chart type?

Ping us via [email protected].