How to Create a Stacked Bar Chart
Select Chart Type
Click the "Stacked" symbol in the available chart types.
Edit Data
You can paste your data straight into the grid, upload a CSV or Excel file, or connect a Google Sheet.
Required Data Format
| Category | Value 1 | Value 2 | Value 3 |
|---|---|---|---|
| Q1 | 24 | 12 | 6 |
| Q2 | 29 | 14 | 8 |
| Q3 | 27 | 13 | 7 |
| Q4 | 33 | 17 | 9 |
- Category (required): the label for each bar, listed down the left side.
- Value 1, Value 2, Value 3... (required, numeric, zero or positive): one column per segment. Add more value columns to add more segments per bar. Negative values aren't supported in stacked mode.
Customize Chart
Below are the different elements of this chart and the properties you can configure for each.
Bar
Each category's stacked segment.
| Fill | sets the segment's fill color, one row per value column |
| Stroke | sets the segment's border color |
| Stroke width | sets the segment's border thickness |
| Dash | switches the border between solid, dashed, or dotted |
Labels
The value shown inside each segment.
| Color | sets the label text color |
| Font | sets the label's font family and weight |
| Size | sets the label's font size |
| Prefix | adds text before the value, e.g. "$" |
| Suffix | adds text after the value, e.g. "%" |
| Decimals | sets how many decimal places the value shows |
Stack Totals
The combined total shown just past the end of each bar.
| Color | sets the total's text color |
| Font | sets the total's font family and weight |
| Size | sets the total's font size |
| Prefix | adds text before the total, e.g. "$" |
| Suffix | adds text after the total, e.g. "%" |
| Decimals | sets how many decimal places the total shows |
Stack Connectors
Dashed lines linking the same segment across bars.
| Color | sets the connector line color |
| Width | sets the connector line thickness |
| Dash | switches the connector between solid, dashed, or dotted |
| Arrow start | adds an arrowhead at the connector's start |
| Arrow end | adds an arrowhead at the connector's end |
Axis
The X and Y axis lines.
| Color | sets the axis line color, set independently for X and Y |
| Width | sets the axis line thickness, set independently for X and Y |
| Dash | switches the axis line between solid, dashed, or dotted |
| Arrow start | adds an arrowhead at the axis line's start |
| Arrow end | adds an arrowhead at the axis line's end |
Grid
The vertical gridlines running up from the X axis.
| Color | sets the gridline color |
| Width | sets the gridline thickness |
| Dash | switches gridlines between solid, dashed, or dotted |
| Arrow start | adds an arrowhead at the gridline's start |
| Arrow end | adds an arrowhead at the gridline's end |
Axis Labels
The tick labels along both axes.
| Color | sets the tick label color, applies to both axes |
| Font | sets the tick label's font family and weight, applies to both axes |
| Size | sets the tick label's font size, applies to both axes |
| Rotation | rotates the tick labels, set independently for X and Y |
| Prefix | adds text before the X axis numbers, e.g. "$" (X axis only) |
| Suffix | adds text after the X axis numbers, e.g. "%" (X axis only) |
| Decimals | sets how many decimal places the X axis numbers show (X axis only) |
| Min | sets the X axis's minimum value instead of auto-calculating it (X axis only) |
| Max | sets the X axis's maximum value instead of auto-calculating it (X axis only) |
| Ticks | sets how many tick marks appear on the X axis (X axis only) |
Legend
The key identifying each value column.
| Position | moves the legend to the top, bottom, right, or directly on the chart |
| Color | sets the legend text color |
| Font | sets the legend's font family and weight |
| Size | sets the legend's font size |
Set Mode to Grouped for side-by-side bars instead of stacked segments, see the Grouped Bar Chart guide, or to 100% Stacked to show proportions instead of totals, see the 100% Stacked Bar Chart guide.
Export
Export as PNG, JPG, or SVG, then drop it into PowerPoint, Google Slides, or a report.