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

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'],
];

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

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

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