# Create Horizontal Bar chart

### 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 <hello@chartplugin.com>.