Skip to content

Horizontal bar chart


Basic data visualization rules are described in the D3 chart.


Horizontal bar chart visualizes distribution of values by category for value comparison.

Key points for using bar chart:

  • Ensure the chart's axes are understandable. Label them if needed.
  • Use simple color schemes. Highlight categories only when needed.


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.


Use horizontal bars when:

  • Categories have long names, like country names.
  • Comparing more than 10 categories.
  • Each category's value needs labeling.
  • Showing category distribution in order.

Avoid horizontal bars when:


Bars should have border-radius: 2px for the top-right and bottom-right corners.

For the grouped bars maintain a 4px margin between them. Aim for at least a 20% margin between columns to avoid clutter.

For more than 3-4 categories, consider using the Stacked horizontal bar chart or other chart type to present the data. Additionally, consider allowing users to switch chart types in the widget settings.


Ensure clear margins for readability and to avoid clutter, such as 8px top and bottom and 16px between category labels and bars.

Margins for Horizontal bar chart
DescriptionAppearance example
margin: 8px 0pxbar-chart margins
The margin between categories and values on the Y-axis and bars is 16px. The margin between values is 8px.
The margin between categories shall be 20px minimum. Otherwise, the data becomes a mess.

Grid and axes

No grid

Omit grid and axes when showing category values as a percentage of 100.

With grid

Use axes and grids for displaying distribution without percentage constraints.


Allocate space for category labels on both sides of the chart.

Category labels

  • Y-axis labels should match the primary text color for clarity (use --text-primary token).
  • Use ellipsis for long labels, with tooltips showing the full name.


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

Use legends for multiple categories.


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.

Horizontal bar chart interaction
Appearance example
Chart with one category
Chart with two or more categories

Edge cases

No more results

Show "No more results" with a 32px margin below values and text with --text-secondary color.

Null values

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


Zero counts as data. 0 ≠ n/a.

No data

Do not display bars 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.

Released under the MIT License.

Released under the MIT License.