PHPackages jonpurvis/radial - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. jonpurvis/radial ActiveLibrary[Templating & Views](/categories/templating) jonpurvis/radial ================ Beautiful donut and pie charts for Flux UI. Drop-in components with hover effects, legends, and dark mode support. v1.1.0(2mo ago)4692MITBladePHP ^8.3 Since Mar 4Pushed 2mo agoCompare [ Source](https://github.com/JonPurvis/radial)[ Packagist](https://packagist.org/packages/jonpurvis/radial)[ RSS](/packages/jonpurvis-radial/feed)WikiDiscussions main Synced 3w ago READMEChangelog (2)Dependencies (6)Versions (4)Used By (0) Radial ====== [](#radial) Radial is a companion for [Flux UI](https://fluxui.dev), adding donut and pie charts styled to match Flux’s look and feel. Simple to use, with hover effects, legends, and dark mode support. LightDark[![Light mode](resources/img/light.png)](resources/img/light.png)[![Dark mode](resources/img/dark.png)](resources/img/dark.png)Installation ------------ [](#installation) ``` composer require jonpurvis/radial ``` Data Structure -------------- [](#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'], ]; ``` KeyTypeDescription`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 --------------- [](#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 [](#basic-usage) ``` ``` ### Donut – all options [](#donut--all-options) PropTypeDefaultDescription`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 [](#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 ------------- [](#pie-component) A solid pie chart (no center hole). Same data structure as the donut; tooltips and legend work the same way. ### Basic usage [](#basic-usage-1) ``` ``` ### Pie – all options [](#pie--all-options) PropTypeDefaultDescription`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 [](#pie-examples) **With legend** ``` ``` **Static** ``` ``` **Sizing** ``` ``` --- Styling ------- [](#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 ------------------- [](#copy-paste-examples) Drop these into a Flux/Livewire page to try the components. ### Donut – minimal [](#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 ``` ### Donut – with legend and center hover [](#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 ``` ### Pie – minimal [](#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 ``` ### Pie – with legend [](#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 ``` ### Side-by-side donut and pie [](#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 ``` Contributing ------------ [](#contributing) Contributions are welcome. Please open an issue or pull request on [GitHub](https://github.com/jonpurvis/radial). License ------- [](#license) MIT ### Health Score 44 — FairBetter than 91% of packages Maintenance83 Actively maintained with recent releases Popularity23 Limited adoption so far Community6 Small or concentrated contributor base Maturity51 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~28 days Total 2 Last Release 84d ago PHP version history (2 changes)v1.0.0PHP ^8.4 v1.1.0PHP ^8.3 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/7534029?v=4)[jp](/maintainers/JonPurvis)[@JonPurvis](https://github.com/JonPurvis) --- Top Contributors [![JonPurvis](https://avatars.githubusercontent.com/u/7534029?v=4)](https://github.com/JonPurvis "JonPurvis (12 commits)") --- Tags bladelivewirechartdonut ### Embed Badge ![Health badge](/badges/jonpurvis-radial/health.svg) ``` [![Health](https://phpackages.com/badges/jonpurvis-radial/health.svg)](https://phpackages.com/packages/jonpurvis-radial) ``` ### Alternatives [moonshine/moonshine Laravel administration panel 1.3k239.9k75](/packages/moonshine-moonshine)[tallstackui/tallstackui TallStackUI is a powerful suite of Blade components that elevate your workflow of Livewire applications. 721160.4k12](/packages/tallstackui-tallstackui)[blade-ui-kit/blade-icons A package to easily make use of icons in your Laravel Blade views. 2.5k39.5M383](/packages/blade-ui-kit-blade-icons)[psalm/plugin-laravel Psalm plugin for Laravel 3345.1M337](/packages/psalm-plugin-laravel)[tightenco/jigsaw Simple static sites with Laravel's Blade. 2.3k449.3k30](/packages/tightenco-jigsaw)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9742.3M121](/packages/roots-acorn) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)