Charts
@talex-touch/tuffex-charts overview: a kumo-shaped API surface, Vue-rendered SVG, no echarts.
Charts
Install & Import
The chart family lives in the standalone @talex-touch/tuffex-charts package. Its API surface mirrors Cloudflare kumo's chart family, but the renderer is Vue-emitted SVG — no echarts and no chart framework; math comes from tree-shakeable d3 micro-modules only (d3-scale / d3-shape / d3-sankey / d3-geo).
pnpm add @talex-touch/tuffex-charts
import { TxTimeseriesChart } from '@talex-touch/tuffex-charts'
import '@talex-touch/tuffex-charts/style.css'
Available Charts
| Component | Section | Description |
|---|---|---|
TxTimeseriesChart | Timeseries | Time-series lines / stacked bars with markers, thresholds, brushing and tooltips. |
TxBubbleMap / TxChoroplethMap | Maps | GeoJSON maps: proportional bubbles and shaded regions. |
TxSankeyChart | Sankey | Flow diagrams. |
TxChart + series primitives | Custom Chart | The composable escape hatch: line/area/bar/scatter/donut, freely combined. |
ChartPalette / CSS variables | Colors | Categorical, semantic, sequential and map palettes, auto light/dark. |
Groups at a Glance
Every component in the suite, grouped by category. The list is read from each doc's category frontmatter, so new components appear on their own.
Legend
TxChartLegendItem ships two legend layouts: small inline rows (multi-series legends) and large stacked metrics (dashboard cards). loading renders skeleton placeholders; with a click listener attached it renders as a native button, so Enter/Space work out of the box.
Legend items
Small / Large / Loading
Click the first item to toggle the second one's inactive state.
API
ChartLegendItem Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'small' | 'large' | 'small' | Inline row / stacked metric layout. |
name | string | — | Series name. Optional while loading. |
color | string | — | Indicator dot color; any CSS color including var(). |
value | string | — | Pre-formatted value text. |
unit | string | — | Unit label after the value (large only). |
inactive | boolean | false | Renders at half opacity for a deselected state. |
loading | boolean | false | Skeleton placeholders (aria-hidden, not focusable). |
Differences from kumo
- No
echartsinstance prop — the renderer is built in; consumers neither need nor can pass echarts. - No
isDarkModeprop — every color reads--tx-chart-*CSS variables and follows the host's.dark/[data-theme='dark']automatically. - Every HTML-string formatter became a slot (VNodes), so there is no XSS-escaping surface.