Charts and Visualization
Batoi UIF supports dependency-free SVG visualization for lightweight datasets, dashboards, and browser-native Micro Apps.
The Data Visualization example shows how users can paste or upload CSV data, infer fields, render charts, and export SVG without sending data to a server. The library chart gallery also covers business, finance, dense composition, cyclical, statistical, and Flint-compatible chart inputs.
Supported Interaction Pattern
- paste or upload local CSV
- infer columns and numeric fields
- choose label and value columns
- filter rows
- render SVG charts
- preview source table
- export chart or project JSON
Chart Types
Current curated examples include:
- line, area, bar, horizontal bar, grouped bar, and stacked bar
- pie, donut, doughnut, radar, sparkline, metric, progress, ring, gauge, timeline, heatmap, status heatmap, and bullet
- histogram, box plot, scatter, regression, control chart, distribution, and pareto
- funnel, waterfall, bubble, treemap, and calendar heatmap
- candlestick, OHLC, rose, and polar area
Flint-Compatible Input
UIF 2.1 accepts a Flint-compatible input shape at the specification boundary. Supported Flint chart names are mapped into UIF native chart types and rendered by the dependency-free SVG renderer. Unsupported advanced layouts such as Sankey, alluvial, sunburst, network, and Gantt remain outside chart core and should use a dedicated package or server-rendered SVG when a product workflow requires them.
For the full native chart matrix, Flint name mapping, unsupported families, and release QA expectations, see Chart Compatibility.
<div
data-uif="chart"
data-uif-chart-format="flint"
data-uif-data='[{"quarter":"Q1","revenue":120},{"quarter":"Q2","revenue":180}]'
data-uif-chart-spec='{"chartType":"Line Chart","encodings":{"x":{"field":"quarter"},"y":{"field":"revenue"}}}'
></div>Statistical Helpers
UIF exposes browser-side helpers for lightweight data exploration, including summary statistics, histogram bins, moving averages, linear regression, correlation, z-scores, and deterministic chart export helpers.
The regularly updated Chart Gallery from the Batoi UIF library is available at https://www.batoi.com/assets/batoi-uif-main/examples/chart-gallery/.
Privacy
Browser-only data tools should clearly state when data remains local.
Server uploads should be explicit and permissioned.