Download the PHP package jonpurvis/radial without Composer
On this page you can find all versions of the php package jonpurvis/radial. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package radial
Radial
Radial is a companion for Flux UI, adding donut and pie charts styled to match Flux’s look and feel. Simple to use, with hover effects, legends, and dark mode support.
| Light | Dark |
|---|---|
Installation
Data Structure
Both components use the same segment format. Each segment requires label, value, and class:
| Key | Type | Description |
|---|---|---|
label |
string |
Segment name (shown in tooltip and, for donut, in center on hover) |
value |
int\|float |
Segment value (determines arc size) |
class |
string |
Tailwind color class for the segment (e.g. text-blue-500) |
Donut Component
A radial chart with a number in the center, perfect for dashboards. Segments highlight on hover, showing values in a tooltip and in the center.
Basic usage
Donut – all options
| Prop | Type | Default | Description |
|---|---|---|---|
data |
array |
[] |
Segments with label, value, and class (Tailwind color) |
label |
string\|null |
null |
Center label shown below the value |
value |
int\|float\|null |
null |
Override center value (defaults to sum of data) |
hover |
string\|null |
null |
Alternative label shown when hovering the center |
hoverLabel |
string\|null |
null |
Alias for hover |
legend |
false\|'top'\|'bottom'\|'left'\|'right' |
false |
Show legend at specified position |
tooltip |
bool |
true |
Show tooltip on segment hover |
cutout |
int |
70 |
Inner hole size (0 = solid, 70 = donut, 90 = thin ring) |
static |
bool |
false |
Disable hover/tap interactions |
size |
string |
'13rem' |
Chart size (width/height) |
Donut examples
Legend on any side
Center hover label
Thin ring (cutout 90)
Custom center value
Static (no interactions)
Sizing – use the class attribute; chart stays square:
Pie Component
A solid pie chart (no center hole). Same data structure as the donut; tooltips and legend work the same way.
Basic usage
Pie – all options
| Prop | Type | Default | Description |
|---|---|---|---|
data |
array |
[] |
Segments with label, value, and class (Tailwind color) |
legend |
false\|'top'\|'bottom'\|'left'\|'right' |
false |
Show legend at specified position |
tooltip |
bool |
true |
Show tooltip on segment hover |
static |
bool |
false |
Disable hover/tap interactions |
size |
string |
'13rem' |
Chart size (width/height) |
Pie examples
With legend
Static
Sizing
Styling
- Segment colors use the
classkey in each data item (e.g.text-green-500). - Center text (donut) and tooltips use Flux-style zinc colors.
- Full dark mode support.
Copy-paste examples
Drop these into a Flux/Livewire page to try the components.
Donut – minimal
Donut – with legend and center hover
Pie – minimal
Pie – with legend
Side-by-side donut and pie
Contributing
Contributions are welcome. Please open an issue or pull request on GitHub.
License
MIT
All versions of radial with dependencies
illuminate/support Version ^11.0|^12.0|^13.0
illuminate/view Version ^11.0|^12.0|^13.0
livewire/flux Version ^2.0