jonpurvis/radial

Beautiful donut and pie charts for Flux UI. Drop-in components with hover effects, legends, and dark mode support.

v1.0.0 2026-03-04 01:41 UTC

Requires

• php: ^8.4
• illuminate/support: ^11.0|^12.0
• illuminate/view: ^11.0|^12.0
• livewire/flux: ^2.0

MIT

• Jon Purvis

• chart
• blade
• livewire
• donut

README

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

composer require jonpurvis/radial

Data Structure

Both components use the same segment format. Each segment requires label, value, and class:

$data = [
    ['label' => 'Critical', 'value' => 40, 'class' => 'text-red-500'],
    ['label' => 'Warning', 'value' => 25, 'class' => 'text-yellow-500'],
    ['label' => 'Healthy', 'value' => 35, 'class' => 'text-green-500'],
];

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

<radial:donut :data="$data" label="Total" />

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

<radial:donut :data="$data" legend="bottom" />
<radial:donut :data="$data" legend="top" />
<radial:donut :data="$data" legend="left" />
<radial:donut :data="$data" legend="right" />

Center hover label

<radial:donut :data="$data" label="Total" hover="All Categories" />

Thin ring (cutout 90)

<radial:donut :data="$data" :cutout="90" />

Custom center value

<radial:donut :data="$data" :value="85" label="Score" />

Static (no interactions)

<radial:donut :data="$data" :static="true" :tooltip="false" />

Sizing – use the class attribute; chart stays square:

<radial:donut :data="$data" class="size-64" />
<radial:donut :data="$data" class="max-w-xs mx-auto" />

Pie Component

A solid pie chart (no center hole). Same data structure as the donut; tooltips and legend work the same way.

Basic usage

<radial:pie :data="$data" />

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

<radial:pie :data="$data" legend="right" />

Static

<radial:pie :data="$data" :static="true" :tooltip="false" />

Sizing

<radial:pie :data="$data" class="size-64" />

Styling

• Segment colors use the class key 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

@php
    $donutData = [
        ['label' => 'Critical', 'value' => 40, 'class' => 'text-red-500'],
        ['label' => 'Warning', 'value' => 25, 'class' => 'text-yellow-500'],
        ['label' => 'Healthy', 'value' => 35, 'class' => 'text-green-500'],
];
@endphp

<radial:donut :data="$donutData" label="Total" />

Donut – with legend and center hover

@php
    $donutData = [
        ['label' => 'Critical', 'value' => 40, 'class' => 'text-red-500'],
        ['label' => 'Warning', 'value' => 25, 'class' => 'text-yellow-500'],
        ['label' => 'Healthy', 'value' => 35, 'class' => 'text-green-500'],
];
@endphp

<radial:donut :data="$donutData" label="Total" hover="All items" legend="bottom" />

Pie – minimal

@php
    $pieData = [
        ['label' => 'A', 'value' => 30, 'class' => 'text-blue-500'],
        ['label' => 'B', 'value' => 50, 'class' => 'text-emerald-500'],
        ['label' => 'C', 'value' => 20, 'class' => 'text-amber-500'],
];
@endphp

<radial:pie :data="$pieData" />

Pie – with legend

@php
    $pieData = [
        ['label' => 'A', 'value' => 30, 'class' => 'text-blue-500'],
        ['label' => 'B', 'value' => 50, 'class' => 'text-emerald-500'],
        ['label' => 'C', 'value' => 20, 'class' => 'text-amber-500'],
];
@endphp

<radial:pie :data="$pieData" legend="right" />

Side-by-side donut and pie

@php
    $chartData = [
        ['label' => 'Critical', 'value' => 40, 'class' => 'text-red-500'],
        ['label' => 'Warning', 'value' => 25, 'class' => 'text-yellow-500'],
        ['label' => 'Healthy', 'value' => 35, 'class' => 'text-green-500'],
];
@endphp

<div class="flex flex-wrap gap-8 justify-center items-start">
    <radial:donut :data="$chartData" label="Total" legend="bottom" />
    <radial:pie :data="$chartData" legend="right" />
</div>

Contributing

Contributions are welcome. Please open an issue or pull request on GitHub.

License

MIT