Range Bar Chart
A Range Bar displays information as a range of data by plotting two Y-values (low and high) per data point. The vertical axis shows the values, and the horizontal axis shows the categories they belong to. So, the range bar chart is a vertical version of the range column chart.
You can find a more in depth explanation about the range bar on this page:
Properties of Range Bar Chart
Property Name | Data type | Type | Description |
Data source | List | Data Model | Data list source for the widget. |
Label | Text | Expression | Labels displayed on y-axis. |
Date start | Date | Expression | Starting date of a range. |
Date end | Date | Expression | End date of a range. |
Series | Text | Expression | This field is used to create different series from the same data source. It's not required. |
Series color | Text | Expression | This field is used to set the color of the series. If empty a random color will be selected. Hexadecimal Colors format Ex.: "#2E93fA" |
Show tooltip | Boolean | Expression | Show tooltip. Use true or false. |
Theme | Text | Dropdown | Change the text and background colors of the chart. (Light, dark). |
Background Color | Text | Expression | Change the background color of the chart. It's important to set the opacity with the color to show the gridlines. Examples: "#FFFFFF60" or "rgba(255, 255, 255, 0.6)" |
Display vertical grid lines | Boolean | Expression | Display vertical grid lines. |
Display horizontal grid lines | Boolean | Expression | Display horizontal grid lines. |
Grid lines color | Text | Expression | Change color of the lines on the grid. Example: "#92a8d1" or "red" or "rgb(201, 76, 76)" or "rgba(201, 76, 76, 0.3)" |
Legend font size | Number | Expression | Change font size of the legend. |
Legend position | Text | Dropdown | Change position of the legend. (Bottom, top, left, right). |
Fill Type | Text | Dropdown | Change fill type of the chart. (solid, gradient, pattern). |
Fill opacity | Number | Expression | Change the fill opacity of the chart. From 0.00 to 1.00 |
Show animation | Boolean | Expression | Display animation on render. |
Height | Number | Expression | To set the height of the chart. |
Width | Number | Expression | To se the width of the chart. |
Last updated
