Stacked Barchart
Last updated
Was this helpful?
Last updated
Was this helpful?
Stacked bar charts are used to show how different components contribute to a total across categories. They help illustrate part-to-whole relationships while preserving the ability to compare overall category values.
📊 Example Use Case
Customer feedback volume broken down by sentiment
Feature requests grouped by user type or plan tier
Monthly signups segmented by acquisition channel
What Makes This Chart a Standout?
Automated Calculations: This chart automatically calculates the total for each label—no manual work needed.
Flexible Display Options: Viewing time-based data? Try switching the chart to a vertical layout 🗓️.
Horizontal or Vertical? Your Choice! While we used to display this chart horizontally, don’t forget you can easily switch to a vertical view!
Learn how to create a stacked barchart using the new design with this step-by-step guide. Explore the interactive walkthrough below to get started quickly, then dive into the full configuration reference table for in-depth details.
Chart Configuration Step-by-Step
Bar orientation
Vertical/Horizontal
The chart can be displayed either horizontally or vertically.
Dimension
Bar category
The bar category corresponds to a column in your dataset, such as 'Product Type'.
Order bars
This option allows to order bars either by column or by custom value.
By column
Bars are ordered based on the selected column. By default, they follow an ascending order—starting with numerical categories, followed by alphabetical (A-Z). This order can be reversed.
By custom value
Bars are ordered based on the selected measure. For example, if the category is 'October' and the bar height is '10', you need to set the value to 10 for this bar to appear first.
Change date format
You can change the display format by selecting an option from the dropdown. Common D3 formats are suggested. Note: Your column must be in a date format for this option to work.
Measure
Bar segment
The bar segment represents a subcategory within each bar, corresponding to a column in your dataset—for example, 'Region' or 'Status'. Each segment stacks within the main bar to show how the total value is divided among its parts.
Bar height
The bar height represents a value from your dataset. You can select an aggregation method from the menu, which may vary depending on the chart type.
Precision
Precision determines the level of detail in how your values are displayed. By default, measures use a .2f format, meaning they are shown with two decimal places.
Example: A value of 3.14159 will be displayed as 3.14 when using .2f formatting.
Unit
Unit represents the total quantity or category being measured for a KPI. It defines what the values correspond to, providing context for better interpretation.
Order segment
The order segment defines the sequence in which the stacked segments appear within each bar. It corresponds to a column in your dataset, such as 'Priority' or 'Stage', and affects the visual arrangement from bottom to top.
Reverse segment order
The reverse segment inverts the stacking order of the segments within each bar. This can help emphasize certain values by bringing them to the top or bottom, depending on the chosen display order.
Show value on segment
Displays all values above the line for easy visibility.
Reverse height order
Reverse height order flips the position of the bars based on their total value—placing the largest at the bottom (or left, in horizontal layout) and the smallest at the top (or right). This can help highlight lower values or change the visual emphasis of the chart.
Additional parameters
ID
Unique chart Id
Add complementary value
The complementary value is displayed in the data label, providing additional context and making it easier for viewers to interpret the data at a glance. It is possible to add a precision, an unit and a sentiment.
Add user chart guide
Lead your chart viewers through the narrative of your data.
Chart performance
Technical performance
