Developer Description
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.
TIP
Important! Consider horizontal bar chart for this task first. It is easier to fit the category names in the columns.
Appearance
| Number of categories | Appearance example | Styles |
|---|---|---|
| One |  | The upper part of the column shall have border-radius: 2px. |
| Two |  | The margin between two columns is 4px. |
TIP
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.
Interaction
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.
TIP
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.
