Horizontal Bar Charts Guide
Compare categories by value with bars running left to right. One dimension, one measure. Best when category names are long or the category count is high.
A horizontal bar chart is a standard bar chart rotated 90 degrees - categories run down the Y-axis, bar length encodes the value on the X-axis. Drop one categorical or date field into Column and one numeric field into Row. The chart builds the same way as a vertical bar, but the orientation makes it the right choice when category names are long or when you are ranking a list.
When to Use
The choice between a horizontal vs vertical bar chart comes down to two things: label length and category count. Reach for the horizontal bar chart when category names are too long to rotate on a vertical chart without becoming unreadable, or when the category count is high enough that vertical bars become narrow columns. Product names, employee names, campaign names, country names - these are the kinds of dimensions that belong on the Y-axis where there is room to read them left to right without tilting your head.
Do not use a horizontal bar chart when the dimension is time. Monthly or quarterly labels are short enough for a vertical chart, and time should read left to right in sequence. A horizontal bar with months running top to bottom breaks the expected reading direction for time-series data. Use a line chart or a vertical bar chart for time dimensions.
Switch to a different chart when:
- Category names are short and fit comfortably on a vertical chart - use Basic Bar
- You need to compare two or more measures per category - use Horizontal Grouped Bar
- You need to show composition across categories - use Horizontal Stacked Bar
- Your dimension is time - use Line Chart or Basic Bar
| Scenario | Dimension | Measure |
|---|---|---|
| Revenue by product name | Product name | Sum of revenue |
| Tickets by assignee | Assignee name | Count of tickets |
| Ad spend by campaign | Campaign name | Sum of spend |
| Headcount by job title | Job title | Count of employees |
| NPS score by region | Region name | Average of NPS score |
Required Inputs
| Field | Type | Count |
|---|---|---|
| Dimension | Categorical or Date | Exactly 1 |
| Measure | Numeric | Exactly 1 |
For step-by-step build instructions, see Build Your First Chart.
Formatting Options
The Format tab unlocks after at least one field is assigned. Once your chart is rendering, use these controls to define how it looks and how viewers interact with it.
Style
Use the chart title to state the ranking or comparison question the chart answers. "Top 20 Campaigns by Spend - Q2 2024" is more useful than "Ad Spend". On a horizontal bar showing a ranked list, the title should tell viewers what they are reading top to bottom.
| Control | What it does |
|---|---|
| Show Chart Title | Shows or hides the title. The text is preserved when hidden so you can toggle it back without re-entering. |
| Enter Chart Title | Title text. Maximum 50 characters. |
| Font family | Font applied to the title. |
| Font size | 5 to 30. |
| Bold / Italic | Weight and style. |
| Alignment | Left, center, or right within the chart container. |
Defaults to transparent, inheriting the dashboard canvas color. Set an explicit color when the chart needs a distinct surface inside a card layout, or when exporting as a standalone image and a white background is required.
| Control | What it does |
|---|---|
| Background Color | Fill color of the chart container. |
Reach for these controls when the default bar appearance does not fit the dashboard design, or when a background track is needed to show capacity or a target. Keep customization minimal on charts that are already doing comparison work through bar length.
| Control | What it does |
|---|---|
| Bar Color | Fill color applied to all bars. One color across all bars. |
| Bar Gap | Space between bars, 0 to 5. At 0, bars touch each other. On a horizontal bar with many categories, reducing Bar Gap slightly gives each bar more visual weight. Keep between 1 and 3. |
| Background Color | A secondary color filling the full axis width behind each bar, like a track. Use this to show remaining capacity - actual spend bars against a budget background. Leave it off if there is no reference value. |
| Border Color | Color of the bar border. |
| Border Width | Thickness of the bar border, 0 to 3. At 0 there is no border. On thin horizontal bars, a border of 2 or more can consume more visual space than the fill itself. |
| Corner Radius (top-left, bottom-left, top-right, bottom-right) | Rounds bar corners independently, 0 to 10 each. On a horizontal bar, the right edge is the tip of the bar - rounding the right corners (top-right, bottom-right) gives a pill-like bar tip. Do not round the left corners unless bar length is always large enough that the rounded left edge does not distort the baseline. |
Data labels print the exact value at the end of each bar. On a horizontal bar they appear to the right of the bar tip. Useful when viewers need exact values alongside the visual ranking - leaderboards, performance reviews, budget summaries.
| Control | What it does |
|---|---|
| Show Data Labels | Shows or hides value labels on each bar. |
| Font family | Font applied to data labels. |
| Font size | Maximum 18. On charts with many categories, keep this at 10 or below to avoid labels colliding with the next bar. |
| Bold / Italic / Color | Text styling. |
| Position | Where the label sits: Top (above the bar tip), Middle (centered inside the bar), or Bottom (at the left edge). Top places the label to the right of the bar tip on a horizontal chart and is the most readable. Middle works when bars are long enough for the label to sit inside without crowding the left edge. |
| Number Type | Default (raw value), Scientific, Decimal, or Percentage. |
| Display Unit | None, Thousand, Million, or Billion. Match this to the X-axis Display Unit. |
| Decimal Places | 0 to 6. Available when Number Type is not Default. |
Axes
On a horizontal bar, the X-axis is the value axis and the Y-axis carries the category names. The X-axis name describes the measure unit. The Y-axis name is often redundant when category labels already make the dimension obvious - hide it to reduce clutter.
Select X or Y before making changes. Settings apply to the selected axis only.
| Control | What it does |
|---|---|
| Show Axis Name | Shows or hides the axis name label. |
| Axis name text | Label text. Maximum 20 characters. Defaults to the field name. |
| Font family | Font applied to the axis name. |
| Font size | 5 to 30. |
| Bold / Italic | Weight and style. |
| Offset (%) | Distance between the axis name and the axis line. Increase if the axis name overlaps the axis labels. |
| Alignment | Start, center, or end along the axis. |
Leave these at their defaults unless you are building a minimal dashboard layout. On a horizontal bar, the Y-axis line runs vertically alongside category labels - hiding it gives the chart a cleaner look but removes the visual anchor between categories and bars.
Select X or Y before making changes.
| Control | What it does |
|---|---|
| Show Axis Line | Shows or hides the axis line. Hiding it also hides ticks. |
| Line Color | Color of the axis line. |
| Line Width | Thickness of the axis line, 0 to 5. |
| Line Type | Solid, Dashed, or Dotted. |
| Show Ticks | Shows or hides tick marks on the axis line. |
| Tick Color | Color of the tick marks. |
| Tick Length | Length of the tick marks, 5 to 10. |
| Boundary Gap | Adds padding at both ends of the category axis so the first and last bars do not sit flush against the chart edges. On by default. |
The primary reason to use a horizontal bar chart is that category labels are long. Make sure they are actually readable - do not reduce font size to the point where the label is unreadable, and do not truncate names in Transform just to fit a chart that is too narrow. Increase the chart height or widen the left margin instead.
Select X or Y before making changes. Hiding axis labels also hides the axis name.
| Control | What it does |
|---|---|
| Show Axis Label | Shows or hides labels along the axis. |
| Font family | Font applied to axis labels. |
| Font size | Label font size. On a horizontal bar, Y-axis labels (category names) are the main navigation aid - do not go below 10. |
| Bold / Italic / Color | Text styling. |
| Rotation | Angle of label text. Rotation is rarely needed on the Y-axis of a horizontal bar chart - labels are already horizontal. Available for X-axis (value scale) labels if needed. |
| Text case | Title Case, Uppercase, or Lowercase. Available on the categorical axis (Y) only. |
| Display Unit | Scale for numeric axis labels: Auto, None, Thousand, Million, or Billion. Available on the value axis (X) only. |
On a horizontal bar chart, X-axis grid lines run vertically through the bars and give viewers a reference for reading bar length against the value scale. Y-axis grid lines run horizontally between bars and add visual noise without benefit. Leave Y-axis grid lines off.
Select X or Y before making changes.
| Control | What it does |
|---|---|
| Show Gridlines | Shows or hides grid lines for the selected axis. |
| Grid Color | Color of the grid lines. |
| Left / Right / Top / Bottom | Plot area margins as a percentage. Increase Left when long category names are clipped by the chart edge. Increase Right when data labels overflow the right side of the chart. |
Interactivity
The tooltip appears when a viewer hovers over a bar, showing the category name and the measure value. On a horizontal bar it is less critical than on a dense vertical chart because category names are already visible on the Y-axis - but it remains the fastest way to get the exact number without a data label on every bar.
| Control | What it does |
|---|---|
| Show Tooltip | Shows or hides the tooltip on hover. |
| Trigger | Item: tooltip appears only for the hovered bar. Axis: tooltip appears for all values at that Y-axis position. The horizontal bar is single-series, so Item is the right choice. |
| Pointer | When Trigger is Axis: the visual indicator - Line, Shadow, Cross, or None. Shadow highlights the full row area at the hovered position. |
| Background Color | Tooltip background color. |
| Headers / Values tabs | Separate styling for the category label row (Headers) and the measure value row (Values). The Values tab includes Number Type, Display Unit, and Decimal Places. |
Keep animation on when the chart is presenting a ranked list for the first time - the build sequence from left to right reinforces the ranking visually. Turn it off on operational dashboards that auto-refresh frequently.
| Control | What it does |
|---|---|
| Enable Animation | Turns the build animation on or off. |
| Duration | How long the animation runs, 0 to 3000ms. The default is 1000ms. |
| Delay | Time before the animation starts after the chart loads, 0 to 2000ms. |
| Easing Function | The motion curve of the animation. Cubic Out (the default) gives a natural deceleration. |
Enable Data Zoom when the category count exceeds what fits in the chart height. On a horizontal bar, Data Zoom scrolls vertically through the category list - the Orientation should be set to Vertical to match.
| Control | What it does |
|---|---|
| Show Data Zoom | Shows or hides the zoom control. |
| Zoom Type | Slider: a draggable range bar alongside the chart. Inside: scroll-to-zoom directly on the plot area. Use Slider. Avoid Inside on trackpad-scrolled dashboards. |
| Slider Size (px) | Width of the slider bar, 10 to 100. Slider type only. |
| Position | Position of the slider relative to the chart. |
| Alignment | Alignment of the slider control. |
| Orientation | Set to Vertical for a horizontal bar chart. Horizontal scrolls across the value axis, which is not useful here. |
| Show Detail Label | Shows range values at the slider handles so viewers know which categories they are viewing. |
| Background Color | Slider background. |
| Filler Color | Color of the selected range inside the slider. |
| Border Color | Slider border. |
| Handle Color | Color of the drag handles. |
| Brush Selection | Enables click-and-drag on the chart to zoom into a range. |
Avoid Zoom Type "Inside" on dashboards that viewers scroll with a trackpad. Scroll events captured by the chart zoom the chart instead of scrolling the page, which is disorienting and hard to exit without knowing to click outside the chart first.
Emphasis controls the hover highlight on individual bars. On a horizontal bar showing a ranked list, emphasis draws attention to the selected category and dims the rest - useful on presentation dashboards where a viewer is walking through the list.
| Control | What it does |
|---|---|
| Show Emphasis | Enables or disables the hover effect entirely. |
| Focus Type | Item: highlights only the hovered bar and dims the others - use this on a horizontal bar chart. Series: equivalent to Item on a single-series chart. None: no visual change on hover. |
| Enable Scale | Scales the hovered bar slightly taller (thicker on a horizontal chart). At Scale Size above 1.3, adjacent bars appear to shift. |
| Scale Size | How much the hovered bar scales. 1.1 is subtle. 1.5 is aggressive. |
Enable the Toolbox when viewers need to export the chart or verify exact values - leaderboards, budget reviews, performance rankings where a viewer will screenshot or download the chart.
| Control | What it does |
|---|---|
| Show Toolbox | Shows or hides the toolbox icon bar. |
| Save as Image | Adds a download icon that saves the chart as a PNG. |
| Data View | Adds an icon that opens the underlying data table in the chart area. |
Best Practices
Sort descending by default. The horizontal bar chart is most often used as a ranked list. Sort by the measure descending so the longest bar appears at the top - viewers read top to bottom and expect the most important category first. An unsorted horizontal bar forces viewers to scan the full list before understanding the ranking.
Give category labels room. The whole point of choosing horizontal over vertical is that labels fit. If you find yourself reducing Y-axis font size below 10 or truncating category names in Transform to make them fit, the chart is too narrow. Increase the chart height on the dashboard canvas instead.
Do not use Data Zoom as a substitute for filtering. A horizontal bar that scrolls through 80 campaign names is not useful - viewers will not scroll through 80 rows looking for insight. Pre-filter to the top 15 to 20 in Transform. Reserve Data Zoom for cases where the full list is genuinely needed and viewers know what they are looking for.
Match X-axis Display Unit to data label Display Unit. If the axis shows "4.3M" and data labels show "4,300,000", the chart is inconsistent. Set both to the same Display Unit. If you do not use data labels, the axis alone is sufficient.
Use a background track sparingly. Background Color in Bar Styles fills the full axis width behind every bar, like a track. This is useful exactly once per chart: when you are comparing actual against a fixed maximum or target. Using it without a reference value just makes bars look shorter than they are.
FAQs
Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.
Last updated on
Stacked Bar
Show how a total breaks into parts across categories. Two to ten measures stacked into a single bar per category.
Horizontal Grouped Bar
Compare two to ten measures side by side per category with bars running left to right. Best when category names are long and multi-measure comparison is needed.