bar-chart
Bars for comparing values, one series or stacked. Server-rendered, with a table view.
Example
View as table
| Value | |
|---|---|
| Mon | 120 |
| Tue | 180 |
| Wed | 150 |
| Thu | 210 |
| Fri | 95 |
Succeeded
Failed
View as table
| Succeeded | Failed | |
|---|---|---|
| Mon | 171 | 2 |
| Tue | 168 | 1 |
| Wed | 180 | 0 |
| Thu | 176 | 3 |
| Fri | 149 | 24 |
Laravel
<x-admin::grid min="20rem">
<x-admin::bar-chart title="Sign-ups per day" :data="['Mon' => 120, 'Tue' => 180, 'Wed' => 150, 'Thu' => 210, 'Fri' => 95]" />
<x-admin::bar-chart title="Sync runs" :labels="['Mon', 'Tue', 'Wed', 'Thu', 'Fri']" :series="['Succeeded' => [171, 168, 180, 176, 149], 'Failed' => [2, 1, 0, 3, 24]]" />
</x-admin::grid>Props
| Prop | Required | Default | Options |
|---|---|---|---|
title | yes | ||
data | null | ||
labels | [] | ||
series | [] | ||
height | "10rem" | ||
loading | false | ||
error | null | ||
empty-text | null | ||
x-label | null | ||
y-label | null |
Other attributes, such as wire:model or data-*, pass through to the element.
Other stacks
React and Vue: import { BarChart } 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" style="--_h:10rem">
<div class="adm-chart__plot" role="img" tabindex="0" data-adm-chart aria-label="Sign-ups per day. 5 values from 95 to 210">
<div class="adm-chart__y" aria-hidden="true">
<span style="--_at:0%">0</span>
<span style="--_at:33.333%">100</span>
<span style="--_at:66.667%">200</span>
<span style="--_at:100%">300</span>
</div>
<div class="adm-chart__area">
<div class="adm-chart__grid" style="--_at:33.333%"></div> <div class="adm-chart__grid" style="--_at:66.667%"></div> <div class="adm-chart__grid" style="--_at:100%"></div> <div class="adm-chart__col" data-adm-hint="Mon: 120">
<div class="adm-chart__bar" style="height:40%;background-color:var(--ad-chart-brand)" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Tue: 180">
<div class="adm-chart__bar" style="height:60%;background-color:var(--ad-chart-brand)" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Wed: 150">
<div class="adm-chart__bar" style="height:50%;background-color:var(--ad-chart-brand)" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Thu: 210">
<div class="adm-chart__bar" style="height:70%;background-color:var(--ad-chart-brand)" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Fri: 95">
<div class="adm-chart__bar" style="height:31.667%;background-color:var(--ad-chart-brand)" ></div>
</div>
</div>
<div class="adm-chart__x" aria-hidden="true" data-dense >
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span> </div>
</div>
<details class="adm-collapsible" >
<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">Sign-ups per day</caption>
<thead><tr><th scope="col"></th><th scope="col" class="adm-num">Value</th></tr></thead>
<tbody>
<tr><th scope="row">Mon</th><td class="adm-num">120</td></tr>
<tr><th scope="row">Tue</th><td class="adm-num">180</td></tr>
<tr><th scope="row">Wed</th><td class="adm-num">150</td></tr>
<tr><th scope="row">Thu</th><td class="adm-num">210</td></tr>
<tr><th scope="row">Fri</th><td class="adm-num">95</td></tr>
</tbody>
</table>
</div></div>
</details>
</figure>
<figure class="adm-chart" style="--_h:10rem">
<div class="adm-chart__legend">
<span class="adm-chart__key"><i style="background-color:var(--ad-chart-1)" ></i>Succeeded</span>
<span class="adm-chart__key"><i style="background-color:var(--ad-chart-2)" data-pattern="1" ></i>Failed</span>
</div>
<div class="adm-chart__plot" role="img" tabindex="0" data-adm-chart aria-label="Sync runs. 5 values from 169 to 180">
<div class="adm-chart__y" aria-hidden="true">
<span style="--_at:0%">0</span>
<span style="--_at:25%">50</span>
<span style="--_at:50%">100</span>
<span style="--_at:75%">150</span>
<span style="--_at:100%">200</span>
</div>
<div class="adm-chart__area">
<div class="adm-chart__grid" style="--_at:25%"></div> <div class="adm-chart__grid" style="--_at:50%"></div> <div class="adm-chart__grid" style="--_at:75%"></div> <div class="adm-chart__grid" style="--_at:100%"></div> <div class="adm-chart__col" data-adm-hint="Mon: Succeeded 171, Failed 2">
<div class="adm-chart__bar" style="height:85.5%;background-color:var(--ad-chart-1)" ></div>
<div class="adm-chart__bar" style="height:1%;background-color:var(--ad-chart-2)" data-pattern="1" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Tue: Succeeded 168, Failed 1">
<div class="adm-chart__bar" style="height:84%;background-color:var(--ad-chart-1)" ></div>
<div class="adm-chart__bar" style="height:0.5%;background-color:var(--ad-chart-2)" data-pattern="1" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Wed: Succeeded 180, Failed 0">
<div class="adm-chart__bar" style="height:90%;background-color:var(--ad-chart-1)" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Thu: Succeeded 176, Failed 3">
<div class="adm-chart__bar" style="height:88%;background-color:var(--ad-chart-1)" ></div>
<div class="adm-chart__bar" style="height:1.5%;background-color:var(--ad-chart-2)" data-pattern="1" ></div>
</div>
<div class="adm-chart__col" data-adm-hint="Fri: Succeeded 149, Failed 24">
<div class="adm-chart__bar" style="height:74.5%;background-color:var(--ad-chart-1)" ></div>
<div class="adm-chart__bar" style="height:12%;background-color:var(--ad-chart-2)" data-pattern="1" ></div>
</div>
</div>
<div class="adm-chart__x" aria-hidden="true" data-dense >
<span>Mon</span><span>Tue</span><span>Wed</span><span>Thu</span><span>Fri</span> </div>
</div>
<details class="adm-collapsible" >
<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">Sync runs</caption>
<thead><tr><th scope="col"></th><th scope="col" class="adm-num">Succeeded</th><th scope="col" class="adm-num">Failed</th></tr></thead>
<tbody>
<tr><th scope="row">Mon</th><td class="adm-num">171</td><td class="adm-num">2</td></tr>
<tr><th scope="row">Tue</th><td class="adm-num">168</td><td class="adm-num">1</td></tr>
<tr><th scope="row">Wed</th><td class="adm-num">180</td><td class="adm-num">0</td></tr>
<tr><th scope="row">Thu</th><td class="adm-num">176</td><td class="adm-num">3</td></tr>
<tr><th scope="row">Fri</th><td class="adm-num">149</td><td class="adm-num">24</td></tr>
</tbody>
</table>
</div></div>
</details>
</figure></div>