Every Semiotic chart accepts a mode prop that instantly adapts it for different contexts. The same component definition works as a full dashboard panel, a compact sidebar widget, or an inline sparkline in a KPI card — without manually stripping axes, hover, and margins.
JSX
<LineChart data={data} xAccessor="month" yAccessor="value" /> // primary (default) <LineChart data={data} xAccessor="month" yAccessor="value" mode="context" /> // compact sidebar <LineChart data={data} xAccessor="month" yAccessor="value" mode="sparkline" /> // inline KPI
Interactive Demo
Toggle between modes to see the same charts adapt their chrome, size, and interaction. User-provided props always override mode defaults — modes are presets, not constraints.
KPI Cards with Sparklines
Sparkline mode strips all chrome for inline use. Embed trend lines in KPI cards, table cells, or notification badges — anywhere a full chart would be too heavy.
JSX
<div style={{ display: "flex", alignItems: "baseline", gap: 8 }}> <span style={{ fontSize: 22, fontWeight: 700 }}>$2.1M</span> <span style={{ color: "#16a34a" }}>+12%</span> </div> <LineChart data={trend} xAccessor="x" yAccessor="y" mode="sparkline" width={100} height={20} colorScheme={["#16a34a"]} />
Linked Dashboard with Context Panels
Pair a primary detail view with context-mode summary charts underneath. Wrap in LinkedCharts for cross-highlighting — hover a channel in any chart and all three highlight to match. The treemap provides a hierarchical breakdown that exposes users to a richer chart type they might not have tried on its own.
Primary — Campaign Performance Detail
Context — Channel Breakdown
Context — Spend Allocation
JSX
<CategoryColorProvider colors={{ Email: "#e15759", Search: "#4e79a7", Social: "#59a14f", Display: "#b07aa1", }}> <LinkedCharts> {/* Primary detail view */} <Scatterplot data={campaigns} xAccessor="spend" yAccessor="roi" colorBy="channel" linkedHover={{ name: "dash", fields: ["channel"] }} selection={{ name: "dash" }} /> {/* Context panels — compact, no chrome, side by side */} <div style={{ display: "flex", gap: 12 }}> <Treemap data={channelTree} childrenAccessor="children" valueAccessor="value" colorBy="channel" mode="context" width={300} height={200} linkedHover={{ name: "dash", fields: ["channel"] }} selection={{ name: "dash" }} /> <DonutChart data={spendBreakdown} categoryAccessor="channel" valueAccessor="spend" colorBy="channel" mode="context" width={200} height={200} linkedHover={{ name: "dash", fields: ["channel"] }} selection={{ name: "dash" }} /> </div> </LinkedCharts> </CategoryColorProvider>
Streaming Sparklines in Tables
Realtime charts support mode="sparkline" too. Embed live streaming spark charts in table rows for infrastructure monitoring, trading dashboards, or IoT sensor grids.
| Metric | Current | Trend (60s) |
|---|
| CPU | 42% | |
| Memory | 68% | |
| Network I/O | 1.2 GB/s | |
| Events/sec | 1.7K | |
| Latency (forecast) | 91ms | |
| Pipeline flow | 34 u/s | |
The first four rows use live streaming charts withmode="sparkline" — 140x28px, no axes, no hover. The fifth row is a static LineChart sparkline withforecast and anomaly decoration, showing training data, predicted values with confidence bands, and flagged anomalies. The last row is a streamingSankeyDiagram — two sources fan into three middle processors, which merge/split into three sinks; edge widths drift smoothly as the upstream volumes oscillate.
JSX
// Streaming sparkline <RealtimeLineChart ref={cpuRef} mode="sparkline" size={[140, 28]} timeAccessor="time" valueAccessor="value" windowSize={60} stroke="#6366f1" strokeWidth={1.5} /> // Forecast + anomaly sparkline (animated via state) // Each datum has pre-computed flags: isTraining, isForecast, isAnomaly, upper, lower <LineChart data={forecastData} xAccessor="x" yAccessor="y" mode="sparkline" width={140} height={28} colorScheme={["#8b5cf6"]} forecast={{ isTraining: "isTraining", isForecast: "isForecast", isAnomaly: "isAnomaly", upperBounds: "upper", lowerBounds: "lower", }} />
Mode Defaults
Each mode sets sensible defaults. Any prop you set explicitly overrides the mode default — mode="sparkline" width=200 gives you a 200px-wide sparkline instead of the default 120px.
| Prop | primary | context | sparkline |
|---|
| width | 600 | 400 | 120 |
| height | 400 | 250 | 24 |
| showAxes | true | false | false |
| showGrid | false | false | false |
| enableHover | true | false | false |
| showLegend | auto | false | false |
| title | shown | hidden | hidden |
| axis labels | shown | hidden | hidden |
| margin | 50/60/70/40 | 10/10/10/10 | 2/2/0/0 |
- Chart Container — wrap any chart in production chrome (title, export, status badge)
- Linked Charts — cross-highlighting and brushing between primary and context charts
- Theming — modes compose with ThemeProvider for dark/light adaptation
- Realtime Encoding — decay, pulse, and staleness on streaming sparklines