Charts
Twelve chart types and a sparkline, on layerchart. Opt-in — they ship behind omaris/chart.
Walkthrough
1. Line and area
Charts read the theme's chart colours, so they re-skin with everything else. They ship behind omaris/chart — see Charts and maps for the install line.
<script lang="ts"> import { LineChart, AreaChart } from 'omaris/chart'; const REVENUE = [ { month: 'Jan', iqd: 42 }, { month: 'Feb', iqd: 51 }, { month: 'Mar', iqd: 48 }, { month: 'Apr', iqd: 63 }, { month: 'May', iqd: 72 }, { month: 'Jun', iqd: 69 } ];</script><div class="flex w-full flex-col gap-6"> <LineChart data={REVENUE} x="month" y="iqd" height={200} label="Revenue by month" /> <AreaChart data={REVENUE} x="month" y="iqd" height={200} label="The same, filled" /></div>2. Bar and pie
horizontal suits long category names; donut leaves the middle free.
<script lang="ts"> import { BarChart, PieChart } from 'omaris/chart'; const CITIES = [ { city: 'Baghdad', orders: 128 }, { city: 'Erbil', orders: 96 }, { city: 'Basra', orders: 54 }, { city: 'Mosul', orders: 41 } ]; const CHANNELS = [ { label: 'WhatsApp', value: 58 }, { label: 'Storefront', value: 27 }, { label: 'Phone', value: 15 } ];</script><div class="grid w-full gap-6 lg:grid-cols-2"> <BarChart data={CITIES} x="city" y="orders" height={220} label="Orders by city" /> <PieChart data={CHANNELS} donut={0.6} legend height={220} title="Orders by channel" /></div>3. Multiple series
series names several measures that share one scale, each with a colour and a legend entry. Two scales is a ComboChart.
<script lang="ts"> import { AreaChart } from 'omaris/chart'; const DATA = [ { month: 'Jan', new: 24, returning: 18 }, { month: 'Feb', new: 31, returning: 20 }, { month: 'Mar', new: 28, returning: 26 }, { month: 'Apr', new: 38, returning: 25 }, { month: 'May', new: 44, returning: 28 }, { month: 'Jun', new: 41, returning: 34 } ];</script><AreaChart data={DATA} x="month" stacked legend height={240} label="Customers" series={[ { key: 'new', label: 'New' }, { key: 'returning', label: 'Returning' } ]} class="w-full"/>4. Sparkline
A sparkline has no axes and no tooltip. It belongs inside a stat, not beside one.
Revenue 4.2M IQD
Orders 319
<script lang="ts"> import { Sparkline } from 'omaris/chart';</script><div class="grid w-full gap-4 sm:grid-cols-2"> <div class="flex flex-col gap-2 rounded-shape-lg border border-border bg-card p-4"> <span class="text-label-lg text-muted-foreground">Revenue</span> <span class="text-headline-sm text-foreground">4.2M IQD</span> <Sparkline data={[12, 18, 15, 24, 22, 31, 38]} height={40} /> </div> <div class="flex flex-col gap-2 rounded-shape-lg border border-border bg-card p-4"> <span class="text-label-lg text-muted-foreground">Orders</span> <span class="text-headline-sm text-foreground">319</span> <Sparkline data={[40, 38, 42, 36, 33, 30, 28]} height={40} /> </div></div>