mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
69 lines
3.1 KiB
Plaintext
69 lines
3.1 KiB
Plaintext
---
|
|
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
|
|
import Chart from '@components/demo/Chart.astro'
|
|
import Card from '@ui/Card.astro'
|
|
import CardBody from '@ui/CardBody.astro'
|
|
import CardTitle from '@ui/CardTitle.astro'
|
|
import CardSubtitle from '@ui/CardSubtitle.astro'
|
|
import DocsLink from '@ui/DocsLink.astro'
|
|
---
|
|
|
|
<DefaultLayout title="Charts advanced" pageMenu="plugins.charts-advanced" pageLibs={['apexcharts']} description="Charts that go past a single series: two scales in one plot, threshold and marker lines, a brush to zoom with, and a group of charts that move together.">
|
|
<DocsLink slot="page-header-actions" path="/ui/plugins/chart" />
|
|
|
|
<div class="row row-cards">
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Two y-axes</CardTitle>
|
|
<CardSubtitle>Plot values with different units together. Bind each axis to a series with the <code>yaxis.seriesName</code> chart option and move the second one to the right with <code>opposite</code>.</CardSubtitle>
|
|
<Chart chartId="revenue-vs-orders" height={16} label="Revenue in dollars and order count per month" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Threshold line</CardTitle>
|
|
<CardSubtitle>Draw a target or a limit across the plot with <code>annotations.yaxis</code>, so a reader sees at a glance which points miss it.</CardSubtitle>
|
|
<Chart chartId="uptime-sla" height={16} label="Monthly uptime against the 99.9 percent service level target" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Marker lines</CardTitle>
|
|
<CardSubtitle>Mark the moment something happened with <code>annotations.xaxis</code> — a release, a campaign, an incident.</CardSubtitle>
|
|
<Chart chartId="sales-with-markers" height={16} label="Monthly sales with campaign start markers" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-lg-6">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Brush and zoom</CardTitle>
|
|
<CardSubtitle>The small chart below picks the range shown above. Point it at the main chart id with <code>chart.brush</code> and render the main chart first.</CardSubtitle>
|
|
<Chart chartId="traffic-zoom" height={11} label="Sessions over 90 days, zoomed to the selected range" />
|
|
<Chart chartId="traffic-brush" height={5} label="Range selector for the sessions chart" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
|
|
<div class="col-12">
|
|
<Card>
|
|
<CardBody>
|
|
<CardTitle>Synced charts</CardTitle>
|
|
<CardSubtitle>Charts that share a <code>chart.group</code> name follow one another — hover or zoom on one and the rest do the same.</CardSubtitle>
|
|
<Chart chartId="synced-visits" height={8} label="Daily visits" />
|
|
<Chart chartId="synced-signups" height={8} label="Daily sign-ups" />
|
|
<Chart chartId="synced-revenue" height={8} label="Daily revenue" />
|
|
</CardBody>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</DefaultLayout>
|