Skip to content

Stacked bar chart


Basic data visualization rules are described in the D3 chart.


Stacked bar chart is used to display multiple categories of values and illustrate their proportions relative to the total.

Key points for using stacked bar chart:

  • Choose this chart to compare more than two categories.
  • It's ideal for showing how parts contribute to a whole.
  • Pick distinctly different colors for clarity.
  • Ensure the chart is large enough to easily read the data.


Bar vs. Histogram Chart

  • Bar charts categorize data qualitatively, showing how different categories compare.
  • Histograms organize data quantitatively, indicating how often values fall within certain ranges.


In a stacked bar chart, columns have no gaps between value segments. Select contrasting colors for visibility.

Aim for at least a 20% margin between columns to avoid clutter.

stacked bar chart

Chart colors

Stick to the designated chart palette and ensure consistent color use.


Hovering highlights a column with --chart-grid-bar-chart-hover, indicating focus or clickability. For trend lines, display corresponding points on hover.

stacked bar chart

For more, refer to the Bar chart.


Trend lines can help identify overall patterns but may clutter simple charts. If used, ensure tooltips provide comprehensive value details.

stacked bar chart

Edge cases

Edge cases for stacked bar chart align with those of the Bar chart.

Initial data loading

For loading details, refer to the Bar chart guide.

Usage in UX/UI

Refer to the Bar chart guide, for the detailed information on specific use cases.

Released under the MIT License.

Released under the MIT License.