What is a horizontal stacked bar chart?

A horizontal stacked bar chart shows the composition of a total per category, with bars running left to right and each segment representing one measure's contribution to the whole. Categories appear on the Y-axis and total bar length encodes the combined value. Use it when category names are long and the question is about proportional breakdown rather than comparing absolute values between measures.

When should I use a horizontal stacked bar chart instead of a vertical stacked bar chart?

Use a horizontal stacked bar chart when category names are long and would overlap or require rotation on a vertical chart. The horizontal orientation gives each category label full room on the Y-axis. Use a vertical Stacked Bar when category names are short or when the chart sits in a narrow column.

When should I use a horizontal stacked bar instead of a horizontal grouped bar?

Use a horizontal stacked bar when the question is about composition - what share does each measure contribute to the total per category. Use a horizontal grouped bar when the question is about comparison - how do the absolute values of each measure differ per category. Stacking obscures the absolute value of non-baseline segments; grouped bars make each value readable independently.

How many measures can I stack in a horizontal stacked bar chart?

The horizontal stacked bar chart requires a minimum of 2 measures and supports up to 10. Beyond 5 segments, the thinner segments become hard to read and the legend becomes the primary navigation tool. Keep the measure count at 5 or fewer for most layouts.

What does Stack Mode do?

Stack Mode switches between two views of the same data. Value mode stacks raw values so bar length represents the actual total per category. 100% mode normalizes each bar to 100% so bar length is always equal and each segment shows its percentage share of the total. Use 100% mode when the question is purely about proportion and absolute totals are not relevant.

Can I only stack measures in the same unit?

Yes. Stacking measures in different units produces a total that has no meaning. If you stack revenue in dollars with order count as an integer, the combined bar length represents a number with no real-world interpretation. Only stack measures that share a common unit so the total is interpretable.

Which Data Zoom orientation should I use?

Set Orientation to Vertical. This scrolls through the category list on the Y-axis, which is what you need on a horizontal chart. Horizontal orientation scrolls the value axis, which is not useful here.

Why are segments in my bars too thin to read?

Thin segments mean too many measures or the segment's absolute value is very small relative to the total. Switch to 100% Stack Mode to normalize all bars to the same length and make small proportions visible. If a segment is genuinely negligible, consider combining it with a related category in Transform before building the chart.

Horizontal Stacked Bar Chart

Show part-to-whole composition per category with bars running left to right - best when category names are long and the question is proportional.

A horizontal stacked bar chart shows the composition of a total per category, with bars running left to right and each segment representing one measure's share of the whole. Categories run down the Y-axis; bar length encodes the combined total; segment length encodes each measure's contribution. Drop one categorical or date field into Column and two or more numeric fields into Row. Use this chart when the question is about proportional breakdown per category and category names are too long to fit on a vertical chart.

When to Use

The horizontal stacked bar chart answers the same question as the vertical Stacked Bar - what does the composition of each category look like - but with category names on the Y-axis where long text has room to breathe. Use it when category names are long (department names, product lines, campaign names) and rotating them on a vertical chart would make them unreadable.

Stacking obscures individual segment values for all but the first measure. Only the leftmost segment has a fixed baseline at zero, so its length is directly readable. Every other segment floats on top of the previous one - viewers must mentally subtract the stack position from the end point to estimate the value. If precise comparison between individual measures is the goal, use Horizontal Grouped Bar instead.

Switch to a different chart when:

Category names are short and fit on a vertical chart - use Stacked Bar
The question is about absolute value comparison, not composition - use Horizontal Grouped Bar
You have only one measure per category - use Horizontal Bar
Your dimension is time - use Stacked Area or Line Chart

Scenario	Dimension	Measures
Revenue breakdown by channel (direct, referral, paid)	Channel name	Sum of direct revenue, Sum of referral revenue, Sum of paid revenue
Headcount by department across employment type	Department name	Count of full-time, Count of part-time, Count of contract
Budget allocation by team (salaries, tools, travel)	Team name	Sum of salaries, Sum of tools, Sum of travel
Order volume by region (new vs. returning customers)	Region name	Count of new orders, Count of returning orders
Ticket resolution by category (resolved, escalated, pending)	Ticket category	Count of resolved, Count of escalated, Count of pending

Required Inputs

Field	Type	Count
Dimension	Categorical or Date	Exactly 1
Measure	Numeric	2 to 10

All measures must share a common unit for the stacked total to be interpretable.

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 composition question clearly. On a horizontal stacked bar, viewers are reading segment widths left to right - the title should tell them what the total represents and what the segments break down before they look at the legend.

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 bars feel too tightly packed or segments need visual polish. All measures share the same gradient palette applied across segments in sequence - the legend and position within the bar differentiate them. Border controls are not available on this chart type.

Control	What it does
Bar Gap	Space between category bars, 0 to 5. At 0, bars touch each other. At 5, bars are thin with wide gaps. Keep between 1 and 3 for most layouts.
Gradient Start Color	The color at the left edge of each segment. Set Start and End to the same color for a flat fill.
Gradient End Color	The color at the right edge (tip) of each segment. Set to a lighter or darker shade of Start Color for a subtle gradient.
Background Color	A secondary color filling the full axis width behind each bar, like a track. Use this to show remaining capacity against a maximum. Leave it off if there is no reference value.
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 - rounding top-right and bottom-right gives a pill-like tip on the last segment. Do not push all corners to 10 on thin bars - narrow bars become pill shapes and segment lengths become misleading.

Switch between absolute and proportional views of the same data without changing your field assignments.

Mode	When to use
Value	Stacks raw values. Bar length represents the actual total per category. Use when total magnitude matters alongside composition.
100%	Normalizes every bar to 100% - this view is also called a 100% horizontal stacked bar chart. Segment length shows percentage share of the total. Bar length is always equal across all categories. Use when the question is purely about proportion and absolute totals are not relevant - for example, comparing share of budget across departments regardless of department size.

In 100% mode, the X-axis scale changes to 0-100 and axis labels show percentage signs. Data labels and tooltip values update to reflect percentages automatically.

Data labels on a horizontal stacked bar print the value inside each segment. With 4 or more segments, labels from thin segments will overlap or be hidden by the auto-hide logic. Use data labels on charts with 3 segments or fewer, or switch to 100% Stack Mode where all segments are wider and labels have more room.

Control	What it does
Show Data Labels	Shows or hides value labels on each segment.
Font family	Font applied to data labels.
Font size	Maximum 18. On dense segments, keep this at 9 or 10 to avoid label collision.
Bold / Italic / Color	Text styling.
Position	Vertical and horizontal alignment of the label inside the segment. Middle / Center is the default and most readable for inside-segment labels.
Number Type	Default (raw value), Scientific, Decimal, or Percentage. In 100% Stack Mode, set Number Type to Percentage to show share values in the labels.
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.

The legend is the only way viewers can identify which segment corresponds to which measure. It is critical on this chart - do not hide it.

Control	What it does
Show Legends	Shows or hides the legend. On by default. Hiding it makes segments unidentifiable.
Vertical position	Top, middle, or bottom alignment of the legend block relative to the chart area.
Horizontal position	Start, center, or end alignment.
Show Name	Default: legend item labels are always visible. On Hover: labels appear only when the viewer hovers the legend. Use Default on shared or exported dashboards.
Orientation	Vertical: legend items stacked in a column. Horizontal: legend items in a row. Horizontal works best when measure names are short and there are 4 or fewer measures.
Item Gap	Spacing between legend items.
Font Size	Legend label font size.
Color	Legend label text color.

Axes

On a horizontal stacked bar, the X-axis is the value axis and the Y-axis carries category names. In 100% Stack Mode the X-axis represents percentage share, not raw values - update the axis name to reflect that. The Y-axis name is often redundant when category labels already identify the dimension.

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 chart, the Y-axis line runs vertically alongside category labels - hiding it gives a cleaner look but removes the visual separator between labels 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 Y-axis category labels are the primary navigation aid on a horizontal chart. Keep them readable - do not reduce font size below 10. If category names are being clipped, increase the left margin under GridLines rather than shrinking the text.

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. Do not go below 10 on Y-axis category labels.
Bold / Italic / Color	Text styling.
Rotation	Angle of label text. Rotation is rarely needed on Y-axis category labels on a horizontal chart - they 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. In 100% Stack Mode the X-axis is already in percentage units - set Display Unit to None.

On a horizontal stacked bar, X-axis grid lines run vertically through the bars and give viewers a reference for reading cumulative bar length. Y-axis grid lines run horizontally between bars and add visual noise. 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. Increase Right when data labels overflow beyond the chart boundary.

Interactivity

Set Tooltip Trigger to Axis on a horizontal stacked bar - it shows all segment values for the hovered category in one pop-up, giving viewers the full composition breakdown without hovering each segment individually.

Control	What it does
Show Tooltip	Shows or hides the tooltip on hover.
Trigger	Item: tooltip shows data for the specific hovered segment only. Axis: tooltip shows all segment values for the hovered category. Use Axis - it delivers the full breakdown in one hover.
Pointer	When Trigger is Axis: the visual indicator - Line, Shadow, Cross, or None. Shadow highlights the full bar row at the hovered position.
Background Color	Tooltip background color.
Headers / Values tabs	Separate styling for the category label row (Headers) and the measure value rows (Values). The Values tab includes Number Type, Display Unit, and Decimal Places.

Keep animation on when the chart is used in a presentation where the left-to-right build draws attention to segment proportions. 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 chart, set Orientation to Vertical so the zoom scrolls through the category list on the Y-axis, not across the value scale.

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 stacked bar chart. Vertical scrolls through the category list. Horizontal scrolls 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 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.

On a horizontal stacked bar, Series focus highlights all segments of the same measure across every category - useful when viewers want to trace one measure's share through the full category list.

Control	What it does
Show Emphasis	Enables or disables the hover effect entirely.
Focus Type	Item: highlights only the hovered segment and dims all others. Series: highlights all segments of the same measure across every category and dims the rest - use this when comparing one measure's share across categories. None: no visual change on hover.
Enable Scale	Scales the hovered bar slightly. Avoid large Scale Size values on stacked bars - scaling one segment visually shifts the position of segments stacked on top of it.
Scale Size	How much the hovered segment scales. Keep at 1.1 or below on stacked layouts.

Enable the Toolbox when viewers need to export the chart or verify exact segment values - budget reviews, resource allocation breakdowns, or any context where a viewer will question the exact proportion a segment represents.

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

Only stack measures in the same unit. Stacking revenue (dollars) with headcount (integer) produces a bar where the total length means nothing. The X-axis cannot represent two different units at once. If your measures are in different units, split them into separate charts or use a chart type with dual axes.

Use 100% Stack Mode when the question is about share, not totals. In Value mode, a department with a large absolute budget dominates the chart visually even if its composition is unremarkable. Switch to 100% mode to make every bar the same length and put the focus on proportional breakdown. This is especially useful when categories vary significantly in total size.

Set Data Zoom Orientation to Vertical, and enable it above 20 to 25 categories. The most common misconfiguration on horizontal charts. The default Horizontal orientation scrolls across the value axis - useless here. Set it to Vertical so the zoom scrolls through the category list on the Y-axis. Beyond around 25 categories, bars become too compressed to read at fixed chart height - Data Zoom lets viewers scroll rather than squeezing everything in.

Keep segment count at 5 or fewer. Beyond 5 measures, narrow segments become unreadable without a tooltip and the legend dominates the chart. If you have more than 5 measures, group minor segments into an "Other" category in Transform before building the chart.

Give category labels room on the left. The primary reason to use a horizontal chart is readable category names. If names are being clipped, increase the Left margin under GridLines. Do not reduce the Y-axis font size below 10 or truncate names in Transform to fit a narrow chart - increase the chart height or left margin instead.

FAQs

Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.