pie-chart

Shares of a whole for 3 to 5 clearly different slices. For close values use bar-chart.

Example

  • Salesforce62%
  • Mailchimp30%
  • Google Sheets8%
View as table
Members by platform
Salesforce62062%
Mailchimp30030%
Google Sheets808%
  • Early entry53%
  • Merchandise33%
  • Upgrades10%
  • Other offers4%
View as table
Perk redemptions
Early entry51253%
Merchandise32433%
Upgrades9610%
Other offers424%

Laravel

<x-admin::grid min="20rem">
    <x-admin::pie-chart title="Members by platform" :data="['Salesforce' => 620, 'Mailchimp' => 300, 'Google Sheets' => 80]" />
    <x-admin::pie-chart title="Perk redemptions" donut :data="['Early entry' => 512, 'Merchandise' => 324, 'Upgrades' => 96, 'Other offers' => 42]" />
</x-admin::grid>

Props

PropRequiredDefaultOptions
titleyes
data[]
donutfalse
loadingfalse
errornull
empty-textnull
height"10rem"

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { PieChart } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<div style="--_min:20rem;--_gap:var(--ad-space-4);gap:var(--_gap)" class="adm-grid"><figure class="adm-chart adm-chart--pie">
    <div class="adm-pie" role="img" tabindex="0" data-adm-chart aria-label="Members by platform. Salesforce 62%, Mailchimp 30%, Google Sheets 8%">
        <svg viewBox="0 0 64 64" aria-hidden="true">
                            <circle class="adm-pie__slice" cx="32" cy="32" r="15.9155" fill="none" stroke="var(--ad-chart-1)" stroke-width="31.831" pathLength="100" stroke-dasharray="61.2 100" stroke-dashoffset="-0" transform="rotate(-90 32 32)" data-adm-hint="Salesforce: 620 (62%)" />
                            <circle class="adm-pie__slice" cx="32" cy="32" r="15.9155" fill="none" stroke="var(--ad-chart-2)" stroke-width="31.831" pathLength="100" stroke-dasharray="29.2 100" stroke-dashoffset="-62" transform="rotate(-90 32 32)" data-adm-hint="Mailchimp: 300 (30%)" />
                            <circle class="adm-pie__slice" cx="32" cy="32" r="15.9155" fill="none" stroke="var(--ad-chart-3)" stroke-width="31.831" pathLength="100" stroke-dasharray="7.2 100" stroke-dashoffset="-92" transform="rotate(-90 32 32)" data-adm-hint="Google Sheets: 80 (8%)" />
                    </svg>
            </div>
    <ul class="adm-pie__legend">
                    <li><i style="background:var(--ad-chart-1)"></i><span class="adm-pie__name">Salesforce</span><span class="adm-pie__value">62%</span></li>
                    <li><i style="background:var(--ad-chart-2)"></i><span class="adm-pie__name">Mailchimp</span><span class="adm-pie__value">30%</span></li>
                    <li><i style="background:var(--ad-chart-3)"></i><span class="adm-pie__name">Google Sheets</span><span class="adm-pie__value">8%</span></li>
            </ul>
    <details class="adm-collapsible adm-chart__table" >
    <summary><svg class="adm-icon adm-collapsible__chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>View as table</summary>
    <div class="adm-collapsible__content"><div class="adm-table-wrap">
            <table class="adm-table">
                <caption class="adm-sr-only">Members by platform</caption>
                <tbody>
                                            <tr><th scope="row">Salesforce</th><td class="adm-num">620</td><td class="adm-num">62%</td></tr>
                                            <tr><th scope="row">Mailchimp</th><td class="adm-num">300</td><td class="adm-num">30%</td></tr>
                                            <tr><th scope="row">Google Sheets</th><td class="adm-num">80</td><td class="adm-num">8%</td></tr>
                                    </tbody>
            </table>
        </div></div>
</details>
</figure>
    <figure class="adm-chart adm-chart--pie">
    <div class="adm-pie" role="img" tabindex="0" data-adm-chart aria-label="Perk redemptions. Early entry 53%, Merchandise 33%, Upgrades 10%, Other offers 4%">
        <svg viewBox="0 0 42 42" aria-hidden="true">
                            <circle class="adm-pie__slice" cx="21" cy="21" r="15.9155" fill="none" stroke="var(--ad-chart-1)" stroke-width="6" pathLength="100" stroke-dasharray="51.767 100" stroke-dashoffset="-0" transform="rotate(-90 21 21)" data-adm-hint="Early entry: 512 (53%)" />
                            <circle class="adm-pie__slice" cx="21" cy="21" r="15.9155" fill="none" stroke="var(--ad-chart-2)" stroke-width="6" pathLength="100" stroke-dasharray="32.465 100" stroke-dashoffset="-52.567" transform="rotate(-90 21 21)" data-adm-hint="Merchandise: 324 (33%)" />
                            <circle class="adm-pie__slice" cx="21" cy="21" r="15.9155" fill="none" stroke="var(--ad-chart-3)" stroke-width="6" pathLength="100" stroke-dasharray="9.056 100" stroke-dashoffset="-85.832" transform="rotate(-90 21 21)" data-adm-hint="Upgrades: 96 (10%)" />
                            <circle class="adm-pie__slice" cx="21" cy="21" r="15.9155" fill="none" stroke="var(--ad-chart-4)" stroke-width="6" pathLength="100" stroke-dasharray="3.512 100" stroke-dashoffset="-95.688" transform="rotate(-90 21 21)" data-adm-hint="Other offers: 42 (4%)" />
                    </svg>
                    <div class="adm-pie__total" aria-hidden="true"><strong>974</strong><span>Total</span></div>
            </div>
    <ul class="adm-pie__legend">
                    <li><i style="background:var(--ad-chart-1)"></i><span class="adm-pie__name">Early entry</span><span class="adm-pie__value">53%</span></li>
                    <li><i style="background:var(--ad-chart-2)"></i><span class="adm-pie__name">Merchandise</span><span class="adm-pie__value">33%</span></li>
                    <li><i style="background:var(--ad-chart-3)"></i><span class="adm-pie__name">Upgrades</span><span class="adm-pie__value">10%</span></li>
                    <li><i style="background:var(--ad-chart-4)"></i><span class="adm-pie__name">Other offers</span><span class="adm-pie__value">4%</span></li>
            </ul>
    <details class="adm-collapsible adm-chart__table" >
    <summary><svg class="adm-icon adm-collapsible__chevron" viewBox="0 0 24 24" aria-hidden="true"><path d="m9 18 6-6-6-6"/></svg>View as table</summary>
    <div class="adm-collapsible__content"><div class="adm-table-wrap">
            <table class="adm-table">
                <caption class="adm-sr-only">Perk redemptions</caption>
                <tbody>
                                            <tr><th scope="row">Early entry</th><td class="adm-num">512</td><td class="adm-num">53%</td></tr>
                                            <tr><th scope="row">Merchandise</th><td class="adm-num">324</td><td class="adm-num">33%</td></tr>
                                            <tr><th scope="row">Upgrades</th><td class="adm-num">96</td><td class="adm-num">10%</td></tr>
                                            <tr><th scope="row">Other offers</th><td class="adm-num">42</td><td class="adm-num">4%</td></tr>
                                    </tbody>
            </table>
        </div></div>
</details>
</figure></div>