Sparkline Chart
Micro line visualization for inline trend monitoring inside dense UI layouts.
Source
LLM docs
Package
npm install @plocks/chartsExamples
6
Properties
54
Playground
Basics
Compact inline trend indicator for dense data summaries.
Loading demo…
import { SparklineChart } from '@plocks/charts';
import { DAILY_SIGNUPS } from './data';
export function Demo() {
return (
<SparklineChart
h={72}
data={DAILY_SIGNUPS}
fill
fillOpacity={0.18}
smooth
showPoints={false}
pointSize={4}
strokeWidth={2.5}
highlightLast={false}
valueFormatter={(value) => `${value} signups`}
domain={{ y: [20, 80] }}
/>
);
}Dashboard Daily Active Users
Loading demo…
import { Block, Card, Flex, Text, Title } from '@plocks/ui';
import { SparklineChart } from '@plocks/charts';
import { SURFACE_SERIES } from './data';
const formatUsers = (value: number) => `${Math.round(value).toLocaleString()} users`;
const getDeltaLabel = (series: number[]) => {
if (series.length < 2) return 'Stable vs yesterday';
const latest = series[series.length - 1];
const prior = series[series.length - 2];
const delta = latest - prior;
if (delta === 0) return 'Stable vs yesterday';
const prefix = delta > 0 ? '+' : '-';
return `${prefix}${Math.abs(delta).toLocaleString()} vs yesterday`;
};
export function Demo() {
return (
<Card padding="lg" radius="lg">
<Block mb="md">
<Title order={5} text="Daily Active Users" />
<Text size="sm" c="muted">Trailing two weeks, by platform</Text>
</Block>
<Flex direction="row" wrap="wrap" gap="md">
{SURFACE_SERIES.map((series) => {
const latest = series.data[series.data.length - 1];
return (
<Block key={series.id} style={{ width: 200 }}>
<Text size="sm" fw="semibold">{series.title}</Text>
<Text size="xs" c="muted">
{latest.toLocaleString()} · {getDeltaLabel(series.data)}
</Text>
<SparklineChart
h={72}
data={series.data}
fill
fillOpacity={0.18}
smooth
highlightLast
valueFormatter={formatUsers}
domain={{ y: [900, 2300] }}
thresholds={[{ value: 2100, label: 'Target', dashed: true, color: '#94A3B8', opacity: 0.7, labelPosition: 'right' }]}
/>
</Block>
);
})}
</Flex>
</Card>
);
}Release Train Bug Count
Loading demo…
import { View, Text } from 'react-native';
import { SparklineChart } from '@plocks/charts';
import { BUG_BACKLOG } from './data';
export function Demo() {
const latest = BUG_BACKLOG[BUG_BACKLOG.length - 1];
const peak = Math.max(...BUG_BACKLOG);
return (
<View style={{ padding: 16, backgroundColor: '#fff', borderRadius: 12, width: 260 }}>
<Text style={{ fontSize: 15, fontWeight: '600', marginBottom: 4 }}>Bugs per Release Train</Text>
<Text style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
Spike highlighted at {peak} bugs · Latest train: {latest} open
</Text>
<SparklineChart
h={86}
data={BUG_BACKLOG}
color="#F03E3E"
fill
fillOpacity={0.12}
smooth
highlightLast
highlightExtrema={{ showMax: true, showMin: false, color: '#F03E3E', radius: 4.5, strokeColor: '#FEE2E2', strokeWidth: 1.5 }}
thresholds={[{ value: 18, label: 'Notice threshold', color: '#F87171', dashed: true, opacity: 0.8, labelPosition: 'left' }]}
domain={{ y: [8, 26] }}
valueFormatter={(value) => `${Math.round(value)} bugs`}
/>
</View>
);
}Storefront Weekly Revenue
Loading demo…
import { View, Text } from 'react-native';
import { SparklineChart } from '@plocks/charts';
import { STOREFRONTS } from './data';
const formatRevenue = (value: number) => `$${value.toFixed(1)}k`;
export function Demo() {
return (
<View style={{ padding: 16, backgroundColor: '#fff', borderRadius: 12 }}>
<Text style={{ fontSize: 15, fontWeight: '600', marginBottom: 4 }}>Weekly Revenue Snapshot</Text>
<Text style={{ fontSize: 12, color: '#666', marginBottom: 12 }}>
Seven-day trailing revenue (k USD) · Goal line at $110k
</Text>
<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
{STOREFRONTS.map((store) => {
const latest = store.data[store.data.length - 1];
const minimum = Math.min(...store.data);
return (
<View key={store.id} style={{ width: 200, marginRight: 16, marginBottom: 18 }}>
<Text style={{ fontSize: 13, fontWeight: '600' }}>{store.name}</Text>
<Text style={{ fontSize: 12, color: '#555', marginBottom: 6 }}>
Latest: {formatRevenue(latest)} · Low: {formatRevenue(minimum)}
</Text>
<SparklineChart
h={76}
data={store.data}
color={store.color}
showPoints
smooth
fill
fillOpacity={0.1}
domain={{ y: [60, 140] }}
highlightLast
highlightExtrema={{ showMin: true, showMax: false, color: store.color, radius: 4, strokeColor: '#FFFFFF', strokeWidth: 1.2 }}
thresholds={[{ value: 110, label: 'Target', dashed: true, color: '#64748B', opacity: 0.75, labelPosition: 'right' }]}
valueFormatter={formatRevenue}
/>
</View>
);
})}
</View>
</View>
);
}Support Queue Monitor
Loading demo…
import { View, Text } from 'react-native';
import { SparklineChart } from '@plocks/charts';
import { QUEUE_DEPTH } from './data';
export function Demo() {
const current = QUEUE_DEPTH[QUEUE_DEPTH.length - 1];
const peak = Math.max(...QUEUE_DEPTH);
return (
<View style={{ padding: 16, backgroundColor: '#fff', borderRadius: 12, width: 260 }}>
<Text style={{ fontSize: 15, fontWeight: '600', marginBottom: 4 }}>Support Queue Length</Text>
<Text style={{ fontSize: 12, color: '#666', marginBottom: 8 }}>
Current queue: {current} tickets · Peak today: {peak}
</Text>
<SparklineChart
h={82}
data={QUEUE_DEPTH}
fill
fillOpacity={0.14}
smooth
highlightLast
highlightExtrema={{ showMin: false, showMax: true, color: '#6366F1', radius: 4.5, strokeColor: '#EEF2FF', strokeWidth: 1.5 }}
thresholds={[{ value: 12, label: 'SLA ceiling', dashed: true, color: '#A5B4FC', opacity: 0.85, labelPosition: 'right' }]}
bands={[{ from: 0, to: 8, color: '#C7D2FE', opacity: 0.18 }]}
domain={{ y: [4, 18] }}
animation={{ duration: 400, easing: 'easeInOutCubic' }}
valueFormatter={(value) => `${Math.round(value)} tickets`}
/>
</View>
);
}Team Deploy Velocity
Loading demo…
import { View, Text } from 'react-native';
import { SparklineChart } from '@plocks/charts';
import { TEAMS } from './data';
export function Demo() {
return (
<View style={{ padding: 16, backgroundColor: '#fff', borderRadius: 12 }}>
<Text style={{ fontSize: 15, fontWeight: '600', marginBottom: 4 }}>Deploy Velocity by Team</Text>
<Text style={{ fontSize: 12, color: '#666', marginBottom: 12 }}>
Rolling 12-day deploy counts · Targets shown as dashed lines
</Text>
<View>
{TEAMS.map((team, index) => (
<View key={team.id} style={{ marginBottom: index === TEAMS.length - 1 ? 0 : 16 }}>
<Text style={{ fontSize: 13, fontWeight: '600', marginBottom: 6 }}>{team.name}</Text>
<SparklineChart
h={76}
data={team.data}
color={team.color}
smooth
fill
fillOpacity={0.08}
domain={{ y: [0, 9] }}
highlightLast
highlightExtrema={{ showMin: true, showMax: true, color: team.color, radius: 4, strokeColor: '#FFFFFF', strokeWidth: 1.2 }}
thresholds={[{ value: team.target, label: `${team.target} target`, dashed: true, color: '#94A3B8', opacity: 0.85, labelPosition: 'right' }]}
bands={[{ from: team.target - 0.5, to: team.target + 1, color: '#CBD5F5', opacity: 0.16 }]}
animation={{ duration: 420, easing: 'easeOutQuad' }}
valueFormatter={(value) => `${Math.round(value)} deploys`}
/>
</View>
))}
</View>
</View>
);
}Related charts
Further reading
React Native design for iOS, Android, and Web.
Quick Links
Resources