Skip to content

Bar chart


Basic data visualization rules are described in the D3 chart.


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.


Bar vs. Histogram Chart

  • Bar charts categorize data qualitatively, showing how different categories compare.
  • Histograms organize data quantitatively, indicating how often values fall within certain ranges.

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.


Consider using the horizontal bar chart, as it makes it easier to fit category names within the columns.


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.


Explore alternative solutions for skewed data in the article from Tom Hopper.


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

Use legends for multiple categories.


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


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


For detailed tooltip guidelines, see Chart principles.

Edge cases

One value

Two values

Null values

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


Zero counts as data. 0 ≠ n/a.

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 exampleHorizontal 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 exampleHorizontal bar chart example

Released under the MIT License.

Released under the MIT License.