Horizontal bar chart

Description ​

Bar chart visualizes distribution of values by category for value comparison. A bar chart can be vertical or horizontal.

Important points to keep in mind when presenting data as a bar chart:

• The axes should be clear to the user from the chart name. However, in cases where the chart name isn’t enough, you can denote the axes.
• Don't use too many colors to represent categories. One color or shades of one color is enough. However, you can always highlight a category if necessary.

Usage ​

Horizontal bars are best used when:

• the names of compared categories of values are long (for example, names of countries);
• you need to compare more than 10 categories of values;
• you need to label value for each category to measure.

Horizontal bars are not recommended when:

• you need to display a trend (use Line chart instead);
• you need to compare data for a certain period of time (use Vertical bar chart or Line chart in this case);
• compare category values if they all add up to 100% (use Donut chart).

Horizontal bars help you compare data in the following cases:

• Distribution of different categories in a certain sequence. For example, by reducing of their value.
• Compare different categories with each other if they have long names.

Appearance ​

Horizontal bar chart ​

	Appearance example	Styles
One category		border-radius: 2px
Two categories		The margin between two columns is 4px.

Margins ​

Description	Appearance example
margin: 8px 0px
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 and axes ​

If you need to demonstrate the ratio of the category value to 100%, don't use grid and axes.

With grid and axes ​

If you don’t need to present the ratio of values to 100%, but just to display their distribution, use the additional axes and the X-axis.

Labels of categories ​

• Unlike vertical chart, the Y-axis labels must have same color as the color of the main text – --text-primary.They are one of the main elements for "reading" data on this chart type.
• If the category label is too long, collapse into an ellipsis. By hovering over it, show the tooltip with the full category name.
• It is better to add the tooltip on the right or left side relative to the category label (so it will not labels of other categories).

Interaction ​

When you hover over a column, we highlight it with --chart-grid-bar-chart-hover. The hover takes up half of the margin column on the top and bottom sides.

If the column is clickable, the cursor changes to pointer.

	Appearance example
Chart with one category
Chart with two or more categories

Edge cases ​

Here you will find the states for some specific cases. All other "empty states" for widgets are specified in Error & n/a widget states.

No more results ​

Display message: "No more results" – below the values with a 32px margin.

Null values ​

If all the values on the chart are zero, then in the tooltip we shall display null all of them in the tooltips.

Some dots have no data ​

Don’t display bars without data.

When you hover over a dot without data, show tooltip with the n/a value. We also recommend you to add a message, which explains why there is no data, and when it will be available (if possible).

Initial loading ​

When the chart is loading for the first time, show Skeleton instead of the chart.

If the chart has a title, show it during loading. The user will have an idea of what is being loaded and whether they need to wait for the loading process to complete.

For more information about this state, refer to Skeleton.

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