Data Display
Charts
Twelve chart types and a sparkline, on layerchart. Opt-in — they ship behind omaris/chart.
import { LineChart } from 'omaris/chart' Examples
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>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>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"/>Sparkline
A sparkline has no axes and no tooltip. It belongs inside a stat, not beside one.
<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>When to use it
Use it for
- A value over time →
LineChart. The same with the space under it filled, which reads as "amount" →AreaChart,stackedwhen the series add up to a total. - Categories →
BarChart,horizontalwhen the names are long,groupedorstackedwhen several series share a band. - Parts of a small whole →
PieChart,donutwith the total incentre, for up to about five slices. Too many parts, or one that dwarfs the rest →TreemapChart, withgroupfor one level of nesting. - Stages →
FunnelChart,dropfor stage over stage. Correlation →ScatterChart,sizefor a bubble. Open, high, low, close →CandlestickChart. A magnitude and a rate on two scales →ComboChartwithaxis: 'right'. Several measures on one shape →RadarChart. - A few progress-shaped values →
RadialBarChart. One number against a range →Gauge. A trend inside a stat tile or a table cell →Sparkline.
Not for
- More than about six rings → a
BarChart. Inner rings of aRadialBarChartget shorter for the same value, so the comparison is off. - A pie of twelve slices, or one slice at 90% →
TreemapChart, or a sortedhorizontalBarChart. - One number with no range → a
display-smText in a Card. With a range → Gauge from the core entry, which needs no peer dependency. - Exact values people read off and compare → Table.
- Places → Map.
Do
- Import from
omaris/chartand addlayerchartandd3-shapeas peers. It is opt-in so a page with only a Button pays nothing for it; see Charts and maps. - Give every chart a
label. The SVG isrole="img"and that is its name. - Pass
error(andonRetry) when the request failed. A failed fetch must not draw a clean empty pair of axes;emptyTextis for a real nothing. - Keep the
seriesshape. Swapping a line for an area or a bar is a one-word change, andreferences(a target, an SLO),annotations,brush,zoomandcsvwork the same on all of them. - Switch to
legend="isolate"once there are more than two series.
Don't
- Set the height from a class.
heightis a prop, and the frame is what layerchart measures. - Put anything hover-dependent in a
Sparkline. It is inert on purpose so it cannot swallow a tap inside a row. - Ask a
ComboChartfor grouped bars beside a line. Bars stack there; use aBarChartand a second chart. - Hand-pick a
colorper series unless it means something, like a team's colour or a status. The palette already follows the theme.
API
LineChart
Line chart.
The same series shape as the other charts, so swapping a line for an area or a bar is a one-word change. references, annotations, brush, zoom, csv and error are shared with them too.
import { LineChart } from 'omaris/chart' <LineChart data={rows} x="date" y="latency" />Props
curve Defaults to 'smooth'
ChartCurve points Defaults to false
boolean Mark each data point.
dashed Defaults to false
boolean Dash the line — for a forecast or a target.
data required T[] x Field<T> The category or time field.
y Field<T> The value field. Ignored once series names its own.
series ChartSeries<T>[] Several values per row. Each gets a colour and a legend entry.
height Defaults to 260
number | string Plot height. A number is px; a string is any CSS length.
axis Defaults to true
boolean | 'x' | 'y' true for both, or just the one you want.
grid Defaults to true
boolean legend Defaults to false
ChartLegend true shows the legend and lets a click toggle a series off. 'isolate' makes a click show that series alone, and a second one bring the rest back — which is the move you actually want on a chart with six lines on it.
tooltip Defaults to true
boolean formatX (value: never) => string Tick labels along the x axis.
formatY (value: never) => string Tick labels along the y axis, and the tooltip's values.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the series.
padding number | { top?: number; right?: number; bottom?: number; left?: number } Space around the plot, in px — room for long axis labels.
label string Accessible description of what the chart shows.
class string empty Snippet Shown in place of the plot when data is empty.
emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
references ChartReference[] Lines and bands at fixed values — targets, thresholds, windows.
annotations ChartAnnotation[] Notes pinned to a point.
brush ChartBrush Drag across the plot to select a range, and zoom the chart to it.
zoom ChartZoom Wheel or pinch to zoom, drag to pan.
AreaChart
Area chart.
Several values per row become several bands: pass series and each one takes the next colour in the palette, gets a legend entry, and appears in the tooltip. stacked piles them instead of overlapping them.
import { AreaChart } from 'omaris/chart' <AreaChart data={rows} x="date" y="revenue" />Props
stacked Defaults to false
boolean Pile the series on top of each other rather than overlapping them.
curve Defaults to 'smooth'
ChartCurve fillOpacity Defaults to 0.18
number Opacity of the fill under each line.
points Defaults to false
boolean Mark each data point.
data required T[] x Field<T> The category or time field.
y Field<T> The value field. Ignored once series names its own.
series ChartSeries<T>[] Several values per row. Each gets a colour and a legend entry.
height Defaults to 260
number | string Plot height. A number is px; a string is any CSS length.
axis Defaults to true
boolean | 'x' | 'y' true for both, or just the one you want.
grid Defaults to true
boolean legend Defaults to false
ChartLegend true shows the legend and lets a click toggle a series off. 'isolate' makes a click show that series alone, and a second one bring the rest back — which is the move you actually want on a chart with six lines on it.
tooltip Defaults to true
boolean formatX (value: never) => string Tick labels along the x axis.
formatY (value: never) => string Tick labels along the y axis, and the tooltip's values.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the series.
padding number | { top?: number; right?: number; bottom?: number; left?: number } Space around the plot, in px — room for long axis labels.
label string Accessible description of what the chart shows.
class string empty Snippet Shown in place of the plot when data is empty.
emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
references ChartReference[] Lines and bands at fixed values — targets, thresholds, windows.
annotations ChartAnnotation[] Notes pinned to a point.
brush ChartBrush Drag across the plot to select a range, and zoom the chart to it.
zoom ChartZoom Wheel or pinch to zoom, drag to pan.
BarChart
Bar chart.
horizontal turns it on its side, which is what long category names actually want; stacked and grouped decide what several series do with the same band.
import { BarChart } from 'omaris/chart' <BarChart data={rows} x="channel" y="signups" />Props
horizontal Defaults to false
boolean Bars run along the x axis, categories down the y one.
stacked Defaults to false
boolean Pile several series into one bar.
grouped Defaults to false
boolean Sit several series side by side within the band.
radius Defaults to 4
number Corner radius on the bars, in px.
labels Defaults to false
boolean Print the value on each bar.
data required T[] x Field<T> The category or time field.
y Field<T> The value field. Ignored once series names its own.
series ChartSeries<T>[] Several values per row. Each gets a colour and a legend entry.
height Defaults to 260
number | string Plot height. A number is px; a string is any CSS length.
axis Defaults to true
boolean | 'x' | 'y' true for both, or just the one you want.
grid Defaults to true
boolean legend Defaults to false
ChartLegend true shows the legend and lets a click toggle a series off. 'isolate' makes a click show that series alone, and a second one bring the rest back — which is the move you actually want on a chart with six lines on it.
tooltip Defaults to true
boolean formatX (value: never) => string Tick labels along the x axis.
formatY (value: never) => string Tick labels along the y axis, and the tooltip's values.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the series.
padding number | { top?: number; right?: number; bottom?: number; left?: number } Space around the plot, in px — room for long axis labels.
label string Accessible description of what the chart shows.
class string empty Snippet Shown in place of the plot when data is empty.
emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
references ChartReference[] Lines and bands at fixed values — targets, thresholds, windows.
annotations ChartAnnotation[] Notes pinned to a point.
brush ChartBrush Drag across the plot to select a range, and zoom the chart to it.
zoom ChartZoom Wheel or pinch to zoom, drag to pan.
CandlestickChart
Candlestick chart — open, high, low and close in one mark per period.
The periods sit on a band scale rather than a time one, so a weekend or a market holiday closes the gap instead of drawing empty space — which is what every trading chart does and why they can't just be a BarChart.
hollow draws rising candles as outlines, the convention that survives a red/green colour-vision problem: filled means down whatever the hue.
import { CandlestickChart } from 'omaris/chart' <CandlestickChart data={days} />Props
data required T[] x Defaults to 'date'
Field<T> The period field. Defaults to row.date.
open Defaults to 'open'
Field<T> Defaults to row.open.
high Defaults to 'high'
Field<T> Defaults to row.high.
low Defaults to 'low'
Field<T> Defaults to row.low.
close Defaults to 'close'
Field<T> Defaults to row.close.
height Defaults to 300
number | string Plot height. A number is px; a string is any CSS length.
axis Defaults to true
boolean | 'x' | 'y' true for both, or just the one you want.
grid Defaults to true
boolean tooltip Defaults to true
boolean up Defaults to 'var(--success)'
string Any CSS colour for a period that closed up.
down Defaults to 'var(--destructive)'
string Any CSS colour for a period that closed down.
hollow Defaults to false
boolean Draw rising candles as outlines rather than fills.
width Defaults to 0.62
number Share of the band each candle body takes.
formatX (value: never) => string Tick labels along the x axis.
formatY (value: never) => string Tick labels along the y axis, and the tooltip's values.
padding number | { top?: number; right?: number; bottom?: number; left?: number } Space around the plot, in px.
label string Accessible description of what the chart shows.
class string empty Snippet emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
references ChartReference[] Lines and bands at fixed values — targets, thresholds, windows.
annotations ChartAnnotation[] Notes pinned to a point.
brush ChartBrush Drag across the plot to select a range, and zoom the chart to it.
zoom ChartZoom Wheel or pinch to zoom, drag to pan.
ChartFrame
The box every chart draws into.
LayerChart measures its container, so a chart needs a height from somewhere; this is that somewhere. It also owns the three states that aren't a plot — nothing to draw, a request that failed, and the download button that hands the numbers back — because "no data" should be a sentence rather than an empty pair of axes, and a chart that renders clean axes while the metrics service is down has told you a lie.
import { ChartFrame } from 'omaris/chart' Props
height required number | string label string Accessible description of what the chart shows.
role Defaults to 'group'
'img' | 'group' 'group' — the default — for a plot with anything in it a person can reach: a legend that filters, a tooltip, the CSV button, the "Try again" of the error state. 'img' for a plot that really is just a picture, which hides the SVG's innards from a screen reader — and which promises there is nothing inside to tab to, so it is wrong the moment there is.
Either way the role is only applied when there is a label to go with it: an unnamed img is a picture a screen reader announces and cannot describe.
blank Defaults to false
boolean True when there's nothing to draw.
emptyText Defaults to 'No data'
string empty Snippet error boolean | string | Error Something went wrong. Truthy replaces the plot with the error state; a string or an Error supplies the message.
errorText Defaults to 'Could not load this chart'
string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer rows as a CSV download. A string names the file.
rows readonly T[] The rows the download writes.
csvColumns (string | CsvColumn<T>)[] Which fields the download writes, in order. Defaults to every field.
class string children Snippet ComboChart
Combo chart — bars and lines on one plot.
The pairing worth having is a magnitude and a rate: bars for the amount, a line for the percentage it works out to. Those two don't share a scale, so axis: 'right' gives the line its own, drawn down the right-hand edge and labelled in its own units.
Bar series stack; a line never joins the stack, whatever else is on the chart. Grouped bars beside a line are a BarChart and a second series away from being unreadable, so they aren't offered here.
import { ComboChart } from 'omaris/chart' <ComboChart data={months} x="month" series={[ { key: 'revenue', type: 'bar' }, { key: 'margin', type: 'line', axis: 'right' } ]}/>Props
data required T[] x Field<T> The category or time field.
series Defaults to []
ComboSeries<T>[] What to draw, in the order it draws.
height Defaults to 280
number | string Plot height. A number is px; a string is any CSS length.
axis Defaults to true
boolean | 'x' | 'y' true for both, or just the one you want.
grid Defaults to true
boolean legend Defaults to false
ChartLegend true toggles a series off on click; 'isolate' shows it alone.
tooltip Defaults to true
boolean stacked Defaults to true
boolean Pile the bar series rather than overlapping them.
radius Defaults to 4
number Corner radius on the bars, in px.
formatX (value: never) => string Tick labels along the x axis.
formatY (value: never) => string Tick labels down the left axis.
formatY2 (value: never) => string Tick labels down the right axis.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the series.
padding number | { top?: number; right?: number; bottom?: number; left?: number } Space around the plot, in px.
label string Accessible description of what the chart shows.
class string empty Snippet emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
references ChartReference[] Lines and bands at fixed values — targets, thresholds, windows.
annotations ChartAnnotation[] Notes pinned to a point.
brush ChartBrush Drag across the plot to select a range, and zoom the chart to it.
zoom ChartZoom Wheel or pinch to zoom, drag to pan.
FunnelChart
Funnel chart — how many made it through each stage.
Each stage is a band that tapers into the next, with the count and the share above it. The numbers sit outside the band rather than on it, because a label printed over a saturated fill is a contrast bug waiting for the one palette that breaks it.
drop swaps the share of the first stage for the share of the previous one, which is the number a growth team actually argues about.
import { FunnelChart } from 'omaris/chart' <FunnelChart data={steps} />Props
data required T[] label Defaults to 'label'
Field<T> Field naming each stage. Defaults to row.label.
value Defaults to 'value'
Field<T> Field holding each stage's count. Defaults to row.value.
height Defaults to 300
number | string Plot height. A number is px; a string is any CSS length.
gap Defaults to 4
number Gap between stages, in px.
share Defaults to true
boolean Show each stage's share — of the first stage, or of the previous.
drop Defaults to false
boolean Measure the share against the previous stage rather than the first.
format (value: number) => string How each count reads.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the stages.
title string Accessible description of what the chart shows.
class string empty Snippet emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
Gauge
Gauge — one number against the range it lives in.
A dial rather than a bar because the sweep carries "how far through the range" at a glance, which is the only question a single number on a dashboard is ever asked. The value is printed in the middle, so the reading never depends on eyeballing an arc.
thresholds colours the dial by where the value landed — the first entry the value is at or under wins — which turns it into a status light without a second component.
import { Gauge } from 'omaris/chart' <Gauge value={72} max={100} caption="of quota" />Props
value required number min Defaults to 0
number Bottom of the range.
max Defaults to 100
number Top of the range.
sweep Defaults to 270
number Degrees the dial sweeps, centred on the top.
height Defaults to 200
number | string Plot height. A number is px; a string is any CSS length.
thickness Defaults to 14
number Thickness of the dial, in px.
color Defaults to 'var(--primary)'
string Any CSS colour. Ignored where a thresholds entry matches.
thresholds { at: number; color: string }[] Colour by value: the first entry whose at the value is at or under wins, and anything above them all falls back to color.
format (value: number) => string How the printed value reads. Defaults to the number itself.
caption string A word under the number — "of quota", "requests/s".
centre Snippet<[{ value: number }]> Replaces the number and caption in the middle.
title string Accessible description of what the gauge shows.
class string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
PieChart
Pie and donut chart.
Unlike the axis charts this one takes a row per slice rather than a series per column, so label and value name the two fields it needs. centre fills the hole in a donut, which is where the total belongs.
import { PieChart } from 'omaris/chart' <PieChart data={rows} label="channel" value="signups" donut />Props
data required T[] label Defaults to 'label'
Field<T> Field naming each slice. Defaults to row.label.
This is the name of a column, not the chart's own name — that is title. Passing a sentence here silently labels every slice undefined, which shows up as a legend of blanks.
value Defaults to 'value'
Field<T> Field holding each slice's size. Defaults to row.value.
donut Defaults to false
boolean | number Cut the middle out. A number is the hole's radius in px.
height Defaults to 260
number | string Plot height. A number is px; a string is any CSS length.
legend Defaults to false
ChartLegend true toggles a slice off on click; 'isolate' shows it alone.
tooltip Defaults to true
boolean labels Defaults to false
boolean Print each slice's value on it.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the slices.
title string Accessible description of what the chart shows.
class string centre Snippet Content for the middle of a donut — a total, usually.
empty Snippet emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
RadarChart
Radar chart — several measures on one shape, so two things can be compared across all of them at once.
The same series shape as the cartesian charts, so a comparison is one prop:
Every spoke shares one scale, which is the only way the shape means anything — spokes with different ranges draw a picture of nothing. Normalise the measures before they get here, or set max.
import { RadarChart } from 'omaris/chart' <RadarChart data={scores} x="skill" y="you" /><RadarChart data={scores} x="skill" series={[{ key: 'you' }, { key: 'team' }]} legend />Props
data required T[] x Field<T> The field naming each spoke.
y Field<T> The value field. Ignored once series names its own.
series ChartSeries<T>[] Several values per row. Each gets a colour and a legend entry.
max number Top of the shared scale. Defaults to the largest value in the data.
height Defaults to 300
number | string Plot height. A number is px; a string is any CSS length.
grid Defaults to true
boolean Rings and spokes behind the shapes.
axis Defaults to 'x'
boolean | 'x' | 'y' 'x' — the default — names the spokes. true also labels the rings, which is worth having when the scale isn't obvious and a collision with whichever spoke points down when it is.
ticks Defaults to 4
number How many rings.
legend Defaults to false
ChartLegend true toggles a series off on click; 'isolate' shows it alone.
tooltip Defaults to true
boolean points Defaults to false
boolean Mark each spoke's value.
fillOpacity Defaults to 0.16
number Opacity of the fill inside each shape.
formatY (value: never) => string Tick labels on the rings.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the series.
label string Accessible description of what the chart shows.
class string empty Snippet emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
RadialBarChart
Radial bar chart — one ring per row, each filled to its share of the whole.
A bar chart bent into a circle. It reads well for a handful of progress-shaped values — quota attainment, storage used, tickets closed — and badly for more than about six, because the inner rings get shorter for the same value and the comparison stops being honest. Past that, BarChart is the right answer.
Each ring is drawn on an unfilled track, so "how far along" reads without an axis. centre fills the hole, which is where the total goes.
import { RadialBarChart } from 'omaris/chart' <RadialBarChart data={teams} max={100} />Props
data required T[] label Defaults to 'label'
Field<T> Field naming each ring. Defaults to row.label.
value Defaults to 'value'
Field<T> Field holding each ring's value. Defaults to row.value.
max number The value a complete ring means. Defaults to the largest one.
height Defaults to 260
number | string Plot height. A number is px; a string is any CSS length.
thickness Defaults to 14
number Thickness of each ring, in px.
gap Defaults to 6
number Gap between rings, in px.
sweep Defaults to 360
number Degrees each ring sweeps when full. 360 is a closed circle.
legend Defaults to false
ChartLegend true toggles a ring off on click; 'isolate' shows it alone.
tooltip Defaults to true
boolean colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the rings.
title string Accessible description of what the chart shows.
class string centre Snippet Content for the middle — a total, usually.
empty Snippet emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
ScatterChart
Scatter chart.
Give it size and the points scale with a third value, which is the bubble chart without a second component.
import { ScatterChart } from 'omaris/chart' <ScatterChart data={rows} x="spend" y="revenue" />Props
radius Defaults to 4
number Radius of each point, in px.
size BaseChartProps<T>['x'] Field driving the point size, for a bubble chart.
sizeRange Defaults to [3, 18]
[number, number] Smallest and largest radius when size is set.
data required T[] x Field<T> The category or time field.
y Field<T> The value field. Ignored once series names its own.
series ChartSeries<T>[] Several values per row. Each gets a colour and a legend entry.
height Defaults to 260
number | string Plot height. A number is px; a string is any CSS length.
axis Defaults to true
boolean | 'x' | 'y' true for both, or just the one you want.
grid Defaults to true
boolean legend Defaults to false
ChartLegend true shows the legend and lets a click toggle a series off. 'isolate' makes a click show that series alone, and a second one bring the rest back — which is the move you actually want on a chart with six lines on it.
tooltip Defaults to true
boolean formatX (value: never) => string Tick labels along the x axis.
formatY (value: never) => string Tick labels along the y axis, and the tooltip's values.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the series.
padding number | { top?: number; right?: number; bottom?: number; left?: number } Space around the plot, in px — room for long axis labels.
label string Accessible description of what the chart shows.
class string empty Snippet Shown in place of the plot when data is empty.
emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.
references ChartReference[] Lines and bands at fixed values — targets, thresholds, windows.
annotations ChartAnnotation[] Notes pinned to a point.
brush ChartBrush Drag across the plot to select a range, and zoom the chart to it.
zoom ChartZoom Wheel or pinch to zoom, drag to pan.
Sparkline
Sparkline — a trend with no axes, sized to sit inline in a table cell or a stat tile.
It takes a bare array of numbers as happily as a list of rows, because at this size the shape is the whole message and anything else is ceremony. Nothing here is interactive: a sparkline that swallows a tap inside a row is worse than one you can't hover.
import { Sparkline } from 'omaris/chart' <Sparkline data={points} />Props
data required T[] | number[] y Field<T> Field holding the value. Ignored when data is numbers.
width Defaults to '100%'
number | string Any CSS length, or a number of px.
height Defaults to 32
number | string color Defaults to CHART_COLORS[0]
string Any CSS colour. Defaults to the first chart role.
area Defaults to true
boolean Fill under the line.
curve Defaults to 'smooth'
ChartCurve marker Defaults to false
boolean Dot on the last point, so "where it ended" reads at a glance.
class string TreemapChart
Treemap — a part-of-a-whole where the parts are too many, or too lopsided, for a pie.
group adds the one level of nesting worth having: rows are gathered into blocks, each block gets a colour and a caption, and the rows inside it are shaded from it. Deeper than that and a treemap stops being readable, so it doesn't take a tree.
Labels are dropped from any tile too small to hold them rather than clipped, because half a word is worse than none.
import { TreemapChart } from 'omaris/chart' <TreemapChart data={spend} />Props
data required T[] label Defaults to 'label'
Field<T> Field naming each tile. Defaults to row.label.
value Defaults to 'value'
Field<T> Field holding each tile's size. Defaults to row.value.
group Field<T> Field gathering rows into blocks.
height Defaults to 300
number | string Plot height. A number is px; a string is any CSS length.
gap Defaults to 2
number Gap between tiles, in px.
radius Defaults to 4
number Corner radius on the tiles, in px.
values Defaults to false
boolean Print each tile's value under its name.
tooltip Defaults to true
boolean format (value: number) => string How each value reads.
colors Defaults to CHART_COLORS
readonly string[] Palette override, cycled across the tiles or the groups.
title string Accessible description of what the chart shows.
class string empty Snippet emptyText string error boolean | string | Error Something went wrong. Truthy puts the chart into its error state; a string or an Error supplies the message.
errorText string The message, when error is just true.
errorState Snippet<[{ message: string }]> Replaces the whole error state.
onRetry () => void Offers a "Try again" button in the error state.
csv Defaults to false
boolean | string Offer the plotted rows as a CSV download, from a button in the corner. A string names the file.
csvColumns (string | { key: string; label?: string; value?: (row: T) => unknown })[] Which fields the download writes, in order. Defaults to every field.