Radial Bar Gauge
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 |
Last updated
