Developer TIP
Basic data visualization rules are described in the D3 chart.
Description
Horizontal stacked bar chart is used to display multiple categories of values and illustrate their proportions relative to the total.
Key points for using horizontal 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. Avoid using too many colors for categories. Shades of one color can work well.
- Ensure the chart is large enough to easily read the data.
TIP
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.
Usage
Refer to the Horizontal bar chart.
Appearance
Choose contrasting colors for different categories.
Margins
Refer to the Horizontal bar chart.
Grid and axes
Refer to the Horizontal bar chart.
Category labels
Refer to the Horizontal bar chart.
Legend
Refer to the Horizontal bar chart.
Interaction
Hovering highlights a bar with --chart-grid-bar-chart-hover, indicating focus or clickability. The hover takes up half of the columns margin on the top and bottom sides.
Edge cases
Refer to Horizontal bar chart.
Initial data loading
Refer to the Horizontal bar chart.