Skip to content

Bar chart


Vertical bar chart helps you compare data when:

  • Time change shall be used when you need to focus on the value of each point, rather than on the trend. For example, achieving a goal in a specific month, or increasing or decreasing the audience on a specific day.
  • Compare different categories with each other.


Important! Consider horizontal bar chart for this task first. It is easier to fit the category names in the columns.


Number of categoriesAppearance exampleStyles
OneThe upper part of the column shall have border-radius: 2px.
TwoThe margin between two columns is 4px.


If there are more than 3-4 categories, use a stacked bar chart or try to present the data using a different type of chart.

It is also a good solution to allow users to switch the chart type in the widget settings.


See detailed information in the common Bar chart guide.

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.

One dot with a data

Two dots with a data

Null values

If all the values on the chart are zero, then in the tooltip we shall display null all of them in the tooltips.


Zero is also data. 0 ≠ n/a.

Some dots have no data

Don’t display columns for the dots without data.

When you hover over a dot without data, show 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.

Use the --skeleton-bg color token for the skeleton background color.

Released under the MIT License.

Released under the MIT License.