TIP
Basic data visualization rules are described in the Chart principles.
Description
Bar chart visualizes distribution of values by category for value comparison. A bar chart can be vertical or horizontal.
TIP
Difference from histogram chart
Bar chart displays distribution of datasets by quality categories.
Histogram charts are used to display distribution of datasets: how often values fall into quantitative ranges.
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
See detailed information in the Horizontal bar chart guide.
Margins
See detailed information in the Horizontal bar chart guide.
Grid and axes
See detailed information in the Horizontal bar chart guide.
Labels of categories
See detailed information in the Horizontal bar chart guide.
Appearance
The stacked bar chart has no margin between categories inside the bar. Choose contrasting colors for different 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
.
Edge cases
Edge cases for stacked bar chart are pretty much the same as Horizontal bar chart has.
Data loading
See detailed information in the section about data loading in the Horizontal bar chart guide.