Stacked Bar Chart
Show how a total breaks into parts across categories. Two to ten measures stacked into a single bar per category.
A stacked bar chart places multiple measures on top of each other within a single bar per category, making it easy to see both the total bar height and how each measure contributes to that total. Drop one categorical or date field into Column and two or more numeric fields into Row. Each measure becomes a stacked segment. Bar height encodes the total across all measures. Segment height encodes each measure's individual contribution.
When to Use
The stacked bar chart works when the question is about composition - what share of the total does each measure represent, and how does that composition vary across categories. Revenue split by product line per region. Headcount by role per department. Support tickets by priority per team. The stacked layout makes it easy to read total bar height and see which segment dominates, but it trades off the ability to compare individual segments precisely across bars.
Middle segments are hard to compare across bars. Only the bottom segment and the total bar height share a common baseline. Every other segment floats at a different starting height in each bar, making direct comparison difficult. If the primary question is "which category has the highest value for measure X", a stacked bar chart will frustrate viewers. Use a grouped bar chart instead.
Switch to a different chart when:
- The question is about absolute values per measure, not composition - use Grouped Bar
- You have only one measure - use Basic Bar
- You need to see how the composition mix shifts across categories rather than absolute values - switch Stack Mode to 100% in Gradient Bar Styles
- Your dimension is time and trend matters more than composition - use Stacked Area
| Scenario | Dimension | Measures |
|---|---|---|
| Revenue vs. cost vs. margin by region | Region | Sum of revenue, Sum of cost, Sum of margin |
| Headcount by role per department | Department | Count of full-time, Count of contract, Count of part-time |
| Support tickets by priority per team | Team | Count of high priority, Count of medium, Count of low |
| Ad spend by channel per quarter | Quarter | Sum of paid search, Sum of social, Sum of display |
| Orders by fulfilment status per month | Month | Count of shipped, Count of pending, Count of cancelled |
Required Inputs
| Field | Type | Count |
|---|---|---|
| Dimension | Categorical or Date | Exactly 1 |
| Measure | Numeric | 2 to 10 |
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 the chart answers, not just the data it contains. "Revenue Mix by Region - Q2 2024" is more useful than "Revenue". On a stacked bar, viewers need orientation - they are reading multiple segments per bar, not a single value.
| 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 segments feel visually flat or bars are too tightly packed. On a stacked bar, all segments share the same gradient style - the legend and stack order differentiate measures, not individual segment colors.
| Control | What it does |
|---|---|
| Bar Gap | Space between bars, 0 to 5. At 0, bars touch each other. Keep between 1 and 3 for most layouts - bars that touch are harder to distinguish as individual category columns. Unlike the grouped bar chart, this controls spacing between bars, not between clusters. |
| Gradient Start Color | The color at the base of each bar. Set Start and End to the same color for a flat fill. |
| Gradient End Color | The color at the top of each bar. Set to a lighter or darker shade of the Start Color for a subtle gradient effect. On a stacked bar, the gradient runs across the full stacked height, not per segment. |
| Background Color | A secondary color filling the full axis height behind each bar, like a track. Use this to show remaining capacity - actual revenue stacked against a total budget background. Leave it off if there is no reference value to show. |
| Corner Radius (top-left, bottom-left, top-right, bottom-right) | Rounds bar corners independently, 0 to 10 each. Corner radius applies to the full stacked bar, not to individual segments. Rounded tops work well on card-style dashboards. |
Stack Mode switches between two stacking behaviours:
| Mode | What it shows | When to use it |
|---|---|---|
| Value (default) | Each bar height is the raw sum of all measures. Segments show absolute values. | When absolute totals matter - revenue, headcount, ticket volume. |
| 100% | Every bar reaches the same height. Segments show each measure as a percentage of the total. | When the question is about composition shift - is the mix changing across categories - and absolute volume is not the point. |
In 100% mode, every bar looks the same height regardless of the actual total. A category with 10 orders and a category with 10,000 orders are visually identical. Use 100% mode only when composition is the question, not volume.
Data labels on a stacked bar print the value inside each segment. Useful when exact segment values matter - finance breakdowns, headcount reports. The risk: on charts with many measures or thin segments, labels from adjacent segments collide or overflow the segment boundary. Only enable when segments are consistently large enough to contain the label text.
| 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 thin segments, reduce to 9 or 10 to avoid overflow into adjacent segments. |
| Bold / Italic / Color | Text styling. |
| Position | Where the label sits within the segment: Top (near the segment top edge), Middle (centered in the segment), or Bottom (near the segment base). Middle is the most readable when segments are tall enough to contain the text. |
| Number Type | Default (raw value), Scientific, Decimal, or Percentage. |
| Display Unit | None, Thousand, Million, or Billion. Match this to the Y-axis Display Unit. |
| Decimal Places | 0 to 6. Available when Number Type is not Default. |
The legend is the primary way viewers map segment color to measure name on a stacked bar chart. It is more critical here than on a basic bar - without it, the segments are unidentifiable. Do not hide it unless the chart is used in a context where the measure names are labeled through other means.
| Control | What it does |
|---|---|
| Show Legends | Shows or hides the legend. On by default. Hiding it makes segments unidentifiable to viewers who did not build the chart. |
| 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. Vertical suits longer measure names or more than 5 measures. |
| Item Gap | Spacing between legend items. |
| Font Size | Legend label font size. |
| Color | Legend label text color. |
Axes
On a stacked bar, the Y-axis name should describe the unit of the total, not individual measures. If measures are all in the same currency, label it "Amount (USD)". If measures are counts, label it "Count". If measures are in different units, a shared Y-axis is misleading - reconsider the chart design.
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 below it. |
| Alignment | Start, center, or end along the axis. |
Leave these at their defaults unless you are building a minimal dashboard layout where the axis border adds visual noise that grid lines already handle. Hiding the axis line also removes ticks.
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. |
Axis labels on the X-axis show category names. On the Y-axis they show the total scale. If category names are long and you have more than 8 categories, set rotation to avoid label collision - stacked bars are typically wider than grouped bars per category, so labels have more room, but long names still collide at higher counts.
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. |
| Bold / Italic / Color | Text styling. |
| Rotation | Angle of category label text. Set to 30 or 45 degrees when category names exceed 8 characters and there are more than 10 categories. |
| Text case | Title Case, Uppercase, or Lowercase. Available on the categorical axis (X) only. |
| Display Unit | Scale for numeric axis labels: Auto, None, Thousand, Million, or Billion. Available on the value axis (Y) only. The Y-axis on a stacked bar shows the total across all measures - make sure the display unit matches that scale. |
Y-axis grid lines give viewers a reference to read total bar height. X-axis grid lines run vertically through bars and add visual complexity without benefit on a stacked chart. Leave X-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 Bottom when rotated axis labels are clipped by the chart edge. Increase Left when large Y-axis numbers run into the plot area. |
Interactivity
Set Tooltip Trigger to Axis on a stacked bar - it shows all segment values for the hovered category in one pop-up, which is the primary way viewers read the composition breakdown without relying on segment heights alone.
| Control | What it does |
|---|---|
| Show Tooltip | Shows or hides the tooltip on hover. |
| Trigger | Item: tooltip shows the value for the specific hovered segment only. Axis: tooltip shows all segment values for the hovered category. Use Axis on a stacked bar - it gives the full composition breakdown in one hover. |
| Pointer | When Trigger is Axis: the visual indicator shown on the axis - Line, Shadow, Cross, or None. Shadow highlights the full bar area at the hovered position. |
| Background Color | Tooltip background color. |
| Headers / Values tabs | Separate styling for the dimension label row (Headers) and the segment value rows (Values). The Values tab includes Number Type, Display Unit, and Decimal Places. |
Keep animation on for presentation dashboards where the stacking sequence draws attention to how the total builds from individual measures. Turn it off on operational dashboards that auto-refresh - repeated animations on every data load become distracting quickly.
| 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. Elastic and Bounce are attention-grabbing - use them deliberately on presentation dashboards, not on operational ones. |
Enable Data Zoom when the category count exceeds what fits in the chart width. On a stacked bar, each category takes a single bar width - so a stacked bar can accommodate more categories per pixel than a grouped bar before requiring scroll.
| Control | What it does |
|---|---|
| Show Data Zoom | Shows or hides the zoom control. |
| Zoom Type | Slider: a draggable range bar below the chart. Inside: scroll-to-zoom directly on the plot area. Use Slider on dashboards where viewers expect a scrollbar UI. Avoid Inside on trackpad-scrolled dashboards. |
| Slider Size (px) | Height of the slider bar, 10 to 100. Slider type only. |
| Position | Vertical position of the slider: Top, Middle, or Bottom. Bottom is the convention. |
| Alignment | Horizontal position: Left, Center, or Right. |
| Orientation | Horizontal or Vertical. Horizontal scrolls across categories. |
| 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.
On a stacked bar, Series focus is the most useful emphasis mode - it highlights all segments of the same measure across every bar, letting viewers trace one measure's contribution through the full dimension without losing track of it in the stack.
| 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 bar and dims the rest. None: no visual change on hover. Use Series on a stacked bar - it solves the baseline problem by isolating one measure at a time across the full chart. |
| Enable Scale | Scales the hovered bar slightly larger. On a stacked bar, scaling the full stacked bar draws attention to the total for that category. |
| Scale Size | How much the hovered bar scales up. 1.1 is subtle. 1.5 is aggressive. |
Enable the Toolbox when viewers need to export the chart or verify the exact value of individual segments - finance reviews, board decks, or any context where a viewer will question what a segment represents. Leave it off on embedded public dashboards where data access should be locked down.
| 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. Viewers can read exact segment values without relying on tooltip hover. |
Best Practices
Only stack measures in the same unit. Stacking revenue (currency) with order count (integer) produces a bar where the total height means nothing. The Y-axis cannot represent two different units simultaneously. If your measures are in different units, split them into separate charts or use a Mixed Line and Bar chart with dual axes.
Keep measure count at 6 or fewer. Beyond 6 stacked segments, the thinnest segments become unreadable bands that viewers cannot distinguish from each other even with the legend. Consolidate low-value measures into an "Other" category in Transform before adding them to the chart.
Use Axis tooltip trigger, not Item. The stacked bar's value is that it shows composition. Setting Tooltip Trigger to Axis delivers the full breakdown in one hover - all segment values for the hovered category. Item trigger shows only one segment at a time and forces viewers to hover each segment individually.
Set Y-axis Display Unit to match the total scale, not the segment scale. The Y-axis on a stacked bar shows total height across all measures. If individual measures are in thousands but the total runs into millions, set Display Unit to Million. A viewer reading an axis that shows "4,300,000" when bars sit at "4.3" on the scale will be confused.
Do not stack measures that contain negative values. Negative segments in a stacked bar render below the zero baseline while positive segments stack above it, producing a chart where total bar height no longer represents the sum and visual comparison becomes unreliable. If your data contains negatives - losses, returns, refunds - use a grouped bar chart where each measure has its own bar and the baseline is consistent.
If the bottom segment is the most important measure, put it first. The only segment that shares a common baseline across all bars is the bottom one. If one measure is the primary point of comparison, drag it to be the first measure in Row so it sits at the base of every bar and is directly comparable across categories.
FAQs
Need help? Email support@edilitics.com with your workspace, job ID, and context. We reply within one business day.
Last updated on