Histogram chart

Description ​

Histogram chart helps grouping numeric data for comparison by quantitative indicators. It shows the distribution of values.

Use histogram when you need to display the distribution of datasets by groups (for example, quantitative ranges).

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

• Always start the Y-axis from zero.
• 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.
• You can place histogram bars horizontally if the range names are long and there are many ranges.

Appearance ​

If you need to display different categories of data within a dataset, use Stacked histogram chart.

Vertical histogram chart ​

The bars have border-radius of 2px. Margin between the bar is minimal.

Horizontal histogram chart ​

The bars have border-radius of 2px. Margin between the bar is minimal.

Color usage ​

• Use color palette and follow the the recommendations it has.
• You can color the histogram bars in different colors when this can be useful for easier reading of the chart. But use it carefully. For example, you need to highlight a certain gradation of ranges. In this case, you can choose the appropriate colors from the chart palette.

Legend and axes ​

As a rule, a histogram doesn't need a legend. You only need to clearly name the chart and in some cases you can add names to the axes.

Sorting of columns ​

Don't forget to use a reasonable order of values to distribute your datasets. For example, from the largest value to the smallest one, and if they represent months - from January to December, etc.

Outliers ​

In some cases some of the values in our data are very different from the majority of values.

If you show this picture as it is, with a zero value on the Y-axis, then large values will draw all the attention to themselves, while the rest of the data will appear to be zero.

Possible solutions for such cases are described in the guide about bar charts, see the section describing outliers. The recommended solution is to make the scale logarithmic instead of linear.

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 right and left sides.

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

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.

Data for one range ​

• We display a single bar if we only have data for one range.
• In the missing data area, display n/a in the tooltip as well as the message that there are no data for this period.

Null values ​

If all the values on the chart are zero, then show 0 for them in the tooltip.

A part of the chart contains no data ​

• Don’t display bars in the area without data.
• When you hover over a range without data, show the 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.

Usage in UX/UI ​

• Start the columns from zero.
• By comparing columns, we are actually comparing the length. If we don’t start the scale from zero, there will be a visual illusion.

Check out the charts below. In the wrong case, the scale doesn't start from zero, and it seems that the Y value is almost half as large as the X value. However, this isn’t true.