Bar Chart
Description
A bar chart is a graphical representation used to compare different categories of data. It consists of rectangular bars, where the length or height of each bar is proportional to the value it represents. It can be horizontally or vertically oriented.
Preview
Config Details
Overall Configuration
Data Configuration
| Ref No | Name | Description | Value | Recommended | Required |
|---|---|---|---|---|---|
| 1 | Layout Orientation | Defines the orientation of the layout horizontally or vertically. | Horizontal, Vertical | - | Yes |
| 2 | Bar Orientation | Defines the orientation of the chart bars. | Horizontal, Vertical | - | Yes |
| 3 | Bar Label Position | Defines the position of the label relative to the bar: inner (inside of the bar) or outer (outside of the bar). | Inner, Outer | - | Yes |
| 4 | Gap | Defines the gap space between the bars. | Use slider | 20 | No |
| 5 | Total | Defines the maximum value that a bar can reach. This value is used to calculate the bar sizes. | A number greater than zero | At least 100 | Yes |
| 6 | Inner Label Orientation | If the Bar Label Position is Inner, defines the orientation of it inside of the bar. | Horizontal, Vertical | Horizontal | Yes |
| 7 | Show Bar BG Border | Whether to show the borders around the bar. | True, False | - | No |
| 8 | Bar BG Color | Defines the background color of the bar area (i.e. the region between the total minus the bar value). | Color picker | - | No |
| 9 | Container Gap | Defines the gap between Value, Title and bar. | Use slider | 0 | No |
| 10 | Proportion: Value | Defines the size proportion of the bar's value. | Use slider | - | Yes |
| 11 | Proportion: Title | Defines the size proportion of the bar's title. | Use slider | - | Yes |
| 12 | Proportion: Bar Label | Defines the size proportion of the bar's label. | Use slider | - | Yes |
| 13 | Value | Defines the bar's value. | Number input | - | Yes |
| 14 | Title | Defines the bar's title. | Text input | - | No |
| 15 | Bar Label | Defines the bar's label. | Text input | - | No |
| 16 | Suffix | Defines the bar's label suffix. | Text input | - | No |
| 17 | Bar Color | Defines the bar's color. | Color picker | - | Yes |
| 18 | Title Color | Defines the bar's title color. | Color picker | - | No |
| 19 | Value Color | Defines the bar's value color. | Color picker | - | No |
| 20 | Skip Animation | Whether to skip the intro animation (when the component is being rendered for the first time). | True, False | - | No |
| 21 | Animation | Defines the intro animation (when the component is being rendered for the first time). | Left to Right, Right to Left, Top to Bottom, Bottom to Top, Fade In, Grow In, None | - | No |