Bar chart

Description ​

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

Key tips for using bar chart:

• Begin the Y-axis at zero to maintain scale integrity.
• Ensure the chart's axes are clear, adding labels if the title isn't descriptive enough.
• Use a single color or shades of one color for simplicity. Highlight categories only if needed.

When to use ​

• Use the bar chart when you need to focus on individual data points' values rather than tracking trends. For instance, when measuring a goal's achievement in a specific month or when analyzing audience fluctuations on specific days.
• Compare different categories against each other.

Appearance ​

The upper part of the bar should have border-radius: 2px.

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 bar chart or other chart type to present the data. Additionally, consider allowing users to switch chart types in the widget settings.

Chart colors ​

Stick to the designated chart palette and ensure consistent color use. Colors can emphasize parts of the data, but be cautious not to overshadow other data points.

Handling outliers ​

Significant value differences can skew perception. To balance this use a minimum bar height of 2px to keep small values visible alongside large ones.

Consider a logarithmic scale for a more uniform data comparison, especially with outliers.

Switch to another chart type if focusing on large values is more insightful.

Legend ​

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

Use legends for multiple categories.

Trend ​

Trend lines can help identify overall patterns but may clutter simple charts. If used, ensure tooltips provide comprehensive value details.

Interaction ​

Hovering highlights a column with --chart-grid-bar-chart-hover, indicating focus or clickability. For trend lines, display corresponding points on hover.

Bar chart interaction

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

Edge cases ​

One value ​

Two values ​

Null values ​

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

No data ​

Do not display columns for data points without values. When hovering over such data points, 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 ​

Start the axes from zero ​

When comparing columns, we are actually comparing their lengths. If we don’t start the axis from zero, it creates a visual illusion. Take a look at the charts below. In the incorrect example, the axis doesn't start from zero, making it appear as though the value on the right is almost half as large as the value on the left. However, this is not accurate.

If the values are very large and close to each other, the difference between the columns may not be noticeable. In such cases, we recommend using a line chart.

For such cases, you can add the possibility to switch the data display from a bar chart to a line chart in the settings.

Sorting of columns ​

Consider a logical order for the values on the axes. For instance, arrange them from the largest value to the smallest, or, if they represent months, from January to December, etc.

Chart as an entry point ​

Sometimes, the chart provides an overall view, and detailed data can be accessed through interaction. There are two common scenarios:

Detailed information in another report ​

In this case, clicking on a column opens the corresponding report. The column should show a hover state. For clarity, you can add a "Click to view details" message to the chart's tooltip.

Upon hovering, the column or columns are highlighted with --chart-grid-bar-chart-hover.

Detailed information in another report

Vertical bar chart example	Horizontal bar chart example

Detailed information in the table below ​

In this case, clicking on the date or column reveals detailed information and changes the period in the table to match the selected date.

Hovering over a clickable date changes its background to --chart-grid-period-bg. When active, the clickable date's text color changes to --text-invert and its background color to --chart-x-axis-accent-period-active.

Detailed information in the table below

Vertical bar chart example	Horizontal bar chart example