INFO

Basic data visualization rules are described in the D3 chart.

Description

Compact horizontal bar chart is a compact version of the Horizontal bar chart that visualizes the distribution of values by category for a part-to-whole comparison.

Usage

Use Compact horizontal bar chart when:

• The values of all categories add up to 100%.
• Categories have or may have long names in localization.
• Interface is narrow, and you need to preserve horizontal space for other information.
• Comparing less than 10 categories.
• Each category's value needs labeling.
• Showing category distribution in the specific order.
• A category cannot have multiple values (to be stacked, in other words).

Avoid Compact horizontal bar chart when:

• Displaying trends (use Line chart).
• Showing data over time (use Bar chart or Line chart).

Appearance

Grid and axes

This chart type does not need a grid.

Category labels

• Labels use the primary text color (--text-primary token).
• Use ellipsis for long labels, with tooltips showing the full name.

Legend

Legend is unnecessary for a single-category bar chart; clear chart naming is usually enough.

For the case with multiple categories, add a legend.

Interaction

Hovering highlights a bar with --chart-grid-bar-chart-hover, indicating focus or clickability.

Edge cases

No more results

Show "No more results" with the --spacing-8x margin below values and text with --text-secondary color. Refer to Error & n/a widget states for all other empty states.

Null values

If all values on the chart are zero, display zero in the tooltips.

TIP

Zero counts as data. 0 ≠ n/a.

No data

Do not display value inside the bar for data points without values. When hovering over such bars, show a tooltip with the "n/a" value. Additionally, consider adding a message explaining the absence of data and providing information on when it will be available (if possible).

Initial data loading

Show Skeleton during initial loading. If the chart has a title, display it to inform users about what's loading. Refer to Skeleton for more details.

Use the --skeleton-bg color token for the skeleton's background.

Refer to Error & n/a widget states for all other empty states.

Usage in UX/UI

See detailed information in the Bar chart guide.