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
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].
Last updated
Was this helpful?