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].

Last updated

Was this helpful?