Radial Bar Gauge
Last updated
Last updated
Radial Bar Charts are valuable in showing comparisons between categories by using circularly shaped bars. Also known as the circular bar chart, it is simply a typical bar chart plot represented on a polar coordinate system. JavaScript Radial Bar Charts are drawn by fixing a unique radius for each bar representing each data and each bar is judged by its angle. In ApexCharts, data can be represented on a radial bar chart in the various formats such as multiple radial bar charts, radial bar with an image, and even in semi-circular gauge forms.
You can find a more in depth explanation about the radial bar gauge on this page: https://apexcharts.com/javascript-chart-demos/radialbar-charts/
| Property Name | Data type | Type | Description |
|---|---|---|---|
Label
Text
Expression
Data display in the radial bar
Value
Number
Expression
Values display in radial bar
Chart Color
Text
Expression
Color for the charted value.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats
Show track
Boolean
Expression
Determines whether a track is used to show the full scale of the chart.
Track color
Text
Expression
Background color for the track.
Only accepts either hex or rgb/rgba so make sure the datalist values are in one of these color formats.
Height
Text
Expression
Can be set to auto, percentage of container or pixels. Default is auto.
Examples: "350" or "350px" or "50%" or "auto".
Width
Text
Expression
Can be set to percentage of container or pixels. Examples: "350" or "350px" or "50%".
Arc style
Text
Dropdown
Defines the arc style for the radialbar. (Full, half, half inverse, gap).
Hollow size
Number
Expression
Percentage of the chart that is the hollow section. (Default 30%)
Data label font size
Number
Expression
Sets the fontsize in px (default 16) of the label displayed in the chart. May cause clipping if too big.
Stroke width
Number
Expression
Determines the width of each stroke. The higher the number the thicker the stroke but less strokes will appear.
No strokes (full-filled) will appear at 0.
Default value: 0