line-chart
Lines for change over time, one or several on a shared axis. Server-rendered, with a table view.
Example
View as table
| Members | |
|---|---|
| Jan | 410 |
| Feb | 455 |
| Mar | 470 |
| Apr | 530 |
| May | 610 |
| Jun | 680 |
Sign-ups
Renewals
View as table
| Sign-ups | Renewals | |
|---|---|---|
| Jan | 120 | 80 |
| Feb | 180 | 95 |
| Mar | 150 | 110 |
| Apr | - | 105 |
| May | 210 | 130 |
| Jun | 240 | 150 |
Laravel
<x-admin::grid min="20rem">
<x-admin::line-chart title="Members" area :data="['Jan' => 410, 'Feb' => 455, 'Mar' => 470, 'Apr' => 530, 'May' => 610, 'Jun' => 680]" />
<x-admin::line-chart title="Sign-ups and renewals" :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']" :series="['Sign-ups' => [120, 180, 150, null, 210, 240], 'Renewals' => [80, 95, 110, 105, 130, 150]]" />
</x-admin::grid>Props
| Prop | Required | Default | Options |
|---|---|---|---|
title | yes | ||
labels | [] | ||
series | [] | ||
data | null | ||
area | false | ||
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 { LineChart } 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="Members. 6 values from 410 to 680">
<div class="adm-chart__y" aria-hidden="true">
<span style="--_at:0%">0</span>
<span style="--_at:25%">200</span>
<span style="--_at:50%">400</span>
<span style="--_at:75%">600</span>
<span style="--_at:100%">800</span>
</div>
<div class="adm-chart__area adm-chart__area--line">
<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> <svg class="adm-chart__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polygon points="0,100 0,48.75 20,43.125 40,41.25 60,33.75 80,23.75 100,15 100,100" fill="var(--ad-chart-brand)" fill-opacity="0.1" />
<polyline points="0,48.75 20,43.125 40,41.25 60,33.75 80,23.75 100,15" fill="none" stroke="var(--ad-chart-brand)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
<span class="adm-chart__dot" style="left:100%;bottom:85%;background:var(--ad-chart-brand)"></span>
<div class="adm-chart__hit" style="left:0%;width:20%" data-adm-hint="Jan: 410"></div>
<div class="adm-chart__hit" style="left:20%;width:20%" data-adm-hint="Feb: 455"></div>
<div class="adm-chart__hit" style="left:40%;width:20%" data-adm-hint="Mar: 470"></div>
<div class="adm-chart__hit" style="left:60%;width:20%" data-adm-hint="Apr: 530"></div>
<div class="adm-chart__hit" style="left:80%;width:20%" data-adm-hint="May: 610"></div>
<div class="adm-chart__hit" style="left:100%;width:20%" data-adm-hint="Jun: 680"></div>
</div>
<div class="adm-chart__x" aria-hidden="true" data-sparse data-dense >
<span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</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">Members</caption>
<thead><tr><th scope="col"></th><th scope="col" class="adm-num">Members</th></tr></thead>
<tbody>
<tr><th scope="row">Jan</th><td class="adm-num">410</td></tr>
<tr><th scope="row">Feb</th><td class="adm-num">455</td></tr>
<tr><th scope="row">Mar</th><td class="adm-num">470</td></tr>
<tr><th scope="row">Apr</th><td class="adm-num">530</td></tr>
<tr><th scope="row">May</th><td class="adm-num">610</td></tr>
<tr><th scope="row">Jun</th><td class="adm-num">680</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"><svg width="20" height="4" viewBox="0 0 20 4" aria-hidden="true"><line x1="1" y1="2" x2="19" y2="2" stroke="var(--ad-chart-1)" stroke-width="2" stroke-linecap="round" /></svg>Sign-ups</span>
<span class="adm-chart__key"><svg width="20" height="4" viewBox="0 0 20 4" aria-hidden="true"><line x1="1" y1="2" x2="19" y2="2" stroke="var(--ad-chart-2)" stroke-width="2" stroke-linecap="round" stroke-dasharray="6 4" /></svg>Renewals</span>
</div>
<div class="adm-chart__plot" role="img" tabindex="0" data-adm-chart aria-label="Sign-ups and renewals. 6 values from 80 to 240">
<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 adm-chart__area--line">
<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> <svg class="adm-chart__lines" viewBox="0 0 100 100" preserveAspectRatio="none" aria-hidden="true">
<polyline points="0,60 20,40 40,50" fill="none" stroke="var(--ad-chart-1)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<polyline points="80,30 100,20" fill="none" stroke="var(--ad-chart-1)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke" />
<polyline points="0,73.333 20,68.333 40,63.333 60,65 80,56.667 100,50" fill="none" stroke="var(--ad-chart-2)" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" vector-effect="non-scaling-stroke" stroke-dasharray="6 4" />
</svg>
<span class="adm-chart__dot" style="left:100%;bottom:80%;background:var(--ad-chart-1)"></span>
<span class="adm-chart__dot" style="left:100%;bottom:50%;background:var(--ad-chart-2)"></span>
<div class="adm-chart__hit" style="left:0%;width:20%" data-adm-hint="Jan: Sign-ups 120, Renewals 80"></div>
<div class="adm-chart__hit" style="left:20%;width:20%" data-adm-hint="Feb: Sign-ups 180, Renewals 95"></div>
<div class="adm-chart__hit" style="left:40%;width:20%" data-adm-hint="Mar: Sign-ups 150, Renewals 110"></div>
<div class="adm-chart__hit" style="left:60%;width:20%" data-adm-hint="Apr: Sign-ups -, Renewals 105"></div>
<div class="adm-chart__hit" style="left:80%;width:20%" data-adm-hint="May: Sign-ups 210, Renewals 130"></div>
<div class="adm-chart__hit" style="left:100%;width:20%" data-adm-hint="Jun: Sign-ups 240, Renewals 150"></div>
</div>
<div class="adm-chart__x" aria-hidden="true" data-sparse data-dense >
<span>Jan</span><span>Feb</span><span>Mar</span><span>Apr</span><span>May</span><span>Jun</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 and renewals</caption>
<thead><tr><th scope="col"></th><th scope="col" class="adm-num">Sign-ups</th><th scope="col" class="adm-num">Renewals</th></tr></thead>
<tbody>
<tr><th scope="row">Jan</th><td class="adm-num">120</td><td class="adm-num">80</td></tr>
<tr><th scope="row">Feb</th><td class="adm-num">180</td><td class="adm-num">95</td></tr>
<tr><th scope="row">Mar</th><td class="adm-num">150</td><td class="adm-num">110</td></tr>
<tr><th scope="row">Apr</th><td class="adm-num">-</td><td class="adm-num">105</td></tr>
<tr><th scope="row">May</th><td class="adm-num">210</td><td class="adm-num">130</td></tr>
<tr><th scope="row">Jun</th><td class="adm-num">240</td><td class="adm-num">150</td></tr>
</tbody>
</table>
</div></div>
</details>
</figure></div>