DATTABI — Charts Gallery
The Charts Gallery is the browsable catalog of every DATTABI visual, with a live illustrative example of each chart. Picking the right visual for each question is what separates a dashboard that informs from one that confuses — and here you see how each chart behaves before configuring your own, instead of finding out after the panel is built.
Open it from the Charts Gallery item in the menu — or go straight to /dattabi-charts-demo.html.
Available visuals
| Category | Visual | Type | Typical use |
|---|---|---|---|
| Categorical | Bars | bar | category comparison |
| Horizontal bars | bar-horizontal | long labels | |
| Stacked columns | column (stacked) | composition per category | |
| Temporal | Line | line | trend |
| Area | area | trend + volume | |
| Calendar heatmap | calendar-heatmap | daily activity over a year | |
| Composition | Pie | pie | composition (max 6) |
| Donut | donut | composition + central KPI | |
| Metric | KPI | kpi | single number + trend |
| Gauge | gauge | KPI with a known max | |
| Correlation | Scatter | scatter | 2 numeric variables |
| Bubble | bubble | 3rd dimension via size | |
| Distribution | Histogram | histogram | 1-variable distribution |
| Boxplot | boxplot | quartiles + outliers | |
| Matrix | Heatmap | heatmap | 2D matrix + intensity |
| Flow | Sankey | sankey | source -> target flow |
| Hierarchy | Treemap | treemap | proportional hierarchy |
| Pipeline | Funnel | funnel | conversion by stage |
| Variance | Waterfall | waterfall | cumulative variation |
| Comparison | Radar | radar | multivariate comparison |
| Financial | Candlestick | candlestick | OHLC |
| Text | Wordcloud | wordcloud | term frequency |
| Network | Graph | graph | node network (D3 force) |
| Tabular | Table | table | rows with sort/page |
| Geo | OSM map | map | OpenStreetMap (no API key) |
| Google Maps | map-google | Google Maps (with API key) |
Map visual details are in the maps guide.
How to create a visual
- Open a dashboard and enter edit mode.
- Drag a visual from the side palette onto the canvas.
- In the right-hand panel, bind the Dataset columns to the visual's channels:
bar/line/area: X, Y, Series.pie/donut/treemap/funnel/waterfall: Label, Value.kpi/gauge: Value (+ optional Label).scatter/bubble: X, Y, Series.sankey/graph: Source, Target, Value.map/map-google: Lat, Lng, Value.
- Configure the aggregation (
SUM,COUNT,AVG,MIN,MAX, etc). - Click Salvar — the dashboard re-renders automatically.
Theme and appearance
Every visual follows the platform's Material Design 3 theme, using the same color and typography variables as the rest of the product. Light and dark themes switch without a rebuild: when the theme changes, the visuals are notified and redraw right away.
Drill-down
The bar and line visuals accept drillX in the column bindings to walk a hierarchy — a double click goes one level down. See the drill-down guide.
Cross-filter
A single click on a bar, slice or point emits the filter to every other visual on the dashboard. See the cross-filter guide.
Worked example — picking the visual from the question
- "Which classes concentrate the cases?" → compare Bars and Treemap with the gallery's live examples; with few categories and long labels, Horizontal bars usually wins.
- "How does the volume evolve over the month?" → Line for the trend; Area if the accumulated volume also matters.
- "What is today's number?" → KPI; use Gauge when there is a known maximum to compare against.