Charts & visualizations
Likeable ships a broad chart library. Every chart accepts a bindKey, so it renders live data from a dataset — see Connecting data. Pick by the shape of your data and the story you're telling.
The catalog
| Brick | Use it for |
|---|---|
| BarChart | Comparing categories |
| LineChart | Trends over a sequence |
| AreaChart | Trends with magnitude / volume |
| PieChart | Parts of a whole |
| ScatterChart | Correlation between two values |
| StatCard | A single KPI with delta / trend |
| DataGrid | Large, sortable / filterable tables (ag-Grid) |
| DataTableECS | Very large tables (tens of thousands of rows; virtualized) |
| TimeSeries | Fast metric time-series, many points (uPlot) — real-time |
| PriceChart | Financial candles + volume (OHLC) |
| CandlestickChart | Simple OHLC candles |
| Gauge | A value within a range |
| Heatmap | Intensity across a matrix |
| RadarChart | Multi-axis comparison |
| FunnelChart | Stage-to-stage conversion |
| SankeyChart | Flows between nodes |
| TreemapChart | Hierarchical proportions |
| EChart | Anything else — a raw ECharts option (escape hatch) |
Binding to data
- Create a dataset — an ApiData or SqlData brick writing to a key, e.g.
sales. - Set the chart's bindKey to that key.
- The chart re-renders whenever the data updates — including on auto-refresh.
Charts expect arrays like [{ label, value }] (bar / line / pie) or a time-series shape. If your data
doesn't match, reshape it with a mortar transform — see Connecting data.
Real-time
For streaming or auto-refreshing metrics, prefer TimeSeries (handles tens of thousands of points) or PriceChart for finance. Pair it with a dataset that refreshes on an interval.
Not sure which chart? Describe the data and the question — "revenue by month, last 12 months" — and the agent picks one. Swap it later with "make this a bar chart".