Developer TIP
Basic data visualization rules are described in the D3 chart.
Description
Histogram chart groups numeric data to compare it by quantity. It's good for showing the distribution of values.
Key points for using histogram:
- Start the Y-axis at zero.
- Make sure the chart title explains the axes. Add labels if needed.
- Use a single color or similar shades for simplicity.
- Consider horizontal histogram for long range names or many ranges.
TIP
Histogram vs. Bar Chart
- Histogram chart are used to display distribution of data sets: how often values fall into quantitative ranges.
- Bar chart displays the distribution of data sets by quality categories for comparison.
Histograms are used to show distributions of variables while bar charts are used to compare variables, source. For example, we want to compare revenues of five companies. In this case, use Bar chart.
If we want to compare the number of companies that earn from 0 to 10,000; from 10,000 to 20,000; from 20,000 to 30,000, etc., then we should use the histogram chart.
- Histograms visually represent data distribution probability.
- Columns are usually the same width for clarity.
Appearance
Vertical histogram chart
The upper part of the bar should have border-radius: 2px.
Horizontal histogram chart
Bars should have border-radius: 2px for the top-right and bottom-right corners.
Color usage
- Stick to the color palette guidelines.
- Different colors can make the chart easier to read. Use this carefully, like for highlighting specific ranges.
Sorting of columns
Organize values logically, such as largest to smallest, or chronologically for months.
TIP
Don't reorder histogram bars by size; it makes the chart hard to read.
Handling outliers
Sometimes data values vary widely. Showing such data as is can skew perception towards larger values, making others seem insignificant.
TIP
Bars have a minimum height of 2px to ensure visibility next to very large values.
A logarithmic scale can help balance the representation of data ranges. Possible solutions for such case are described in the Handling outliers section for Bar chart.
Legend and axes
Usually, histograms don't need a legend. Just clearly name the chart and possibly label the axes.
Interaction
Hovering highlights a column with --chart-grid-bar-chart-hover, indicating focus or clickability. For trend lines, display corresponding points on hover.
Edge cases
Data for one range
Display a single bar for single-range data.
Null values
Show zero in tooltips for all-zero data.
TIP
Zero counts as data. 0 ≠ n/a.
No data
Do not display bars for ranges without values. When hovering over such ranges, 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.
Usage in UX/UI
Always start columns from zero to avoid misleading comparisons. Incorrect scaling can create illusions of proportion, making one value seem half as large as another when it's not.
