# vizzuhq/vizzu-lib architecture

> Architecture diagram of the GitHub repository vizzuhq/vizzu-lib, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-29). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/vizzuhq/vizzu-lib
- Repository: https://github.com/vizzuhq/vizzu-lib

## Overview

Vizzu is a JavaScript/C++ library for building animated, interactive data visualizations and data stories. The principal workflow accepts chart data and channel/geometry settings through the JavaScript API, crosses the WebAssembly-facing interface, updates a chart, and produces canvas output; animation transitions between chart states. The README also describes aggregation, filtering, HTML5 canvas rendering, and interactive exploration, reflected as distinct branches. Wiring among unsampled modules is intentionally limited to documented behavior and clear interface calls.

Main entry points: [`src/chart/main/chart.cpp`](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/main/chart.cpp) (Chart state), [`src/chart/ui/chart.cpp`](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/ui/chart.cpp) (Chart widget), [`src/apps/weblib/ts-api/chart.ts`](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/chart.ts) (Chart API), [`src/apps/weblib/ts-api/plugins.ts`](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins.ts) (API plugins)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_api["JavaScript API"]
  node_jsapi["Chart API<br/>[chart.ts]"]
  node_jsvizzu["Vizzu entry<br/>[vizzu.ts]"]
  node_bridge["WASM interface<br/>[interface.cpp]"]
  node_native["C interface<br/>[cinterface.cpp]"]
end

subgraph group_chart["Chart Engine"]
  node_chartwidget["Chart widget<br/>[chart.cpp]"]
  node_chartcore["Chart state<br/>[chart.cpp]"]
  node_options["Chart options<br/>[options.cpp]"]
  node_animator["Animation planner<br/>[planner.cpp]"]
end

subgraph group_data["Data Handling"]
  node_dataapi["Data interface<br/>[interface.cpp]"]
  node_datatable[("Data table<br/>[dataframe.cpp]")]
  node_aggregation["Aggregation<br/>[aggregators.cpp]"]
end

subgraph group_visual["Visualization"]
  node_plotbuilder["Plot generation<br/>[plotbuilder.cpp]"]
  node_layout["Chart layout<br/>[layout.cpp]"]
  node_renderer["Chart drawing<br/>[drawchart.cpp]"]
end

subgraph group_interaction["Interaction"]
  node_plugins["API plugins<br/>[plugins.ts]"]
  node_pointer["Pointer events<br/>[pointerevents.ts]"]
  node_tooltip["Tooltip<br/>[tooltip.ts]"]
  node_presets["Chart presets<br/>[presets.ts]"]
end

node_developer(("Application"))
node_canvas["HTML canvas"]
node_browser(("Browser user"))

node_developer -->|"creates chart"| node_jsvizzu
node_jsvizzu -->|"exposes API"| node_jsapi
node_jsapi -->|"calls interface"| node_bridge
node_bridge -->|"forwards calls"| node_native
node_native -->|"dispatches chart actions"| node_chartwidget
node_chartwidget -->|"updates state"| node_chartcore
node_chartwidget -->|"plans transitions"| node_animator
node_chartwidget -->|"adds data"| node_dataapi
node_dataapi -->|"forwards operations"| node_datatable
node_datatable -->|"uses aggregators"| node_aggregation
node_plotbuilder -->|"reads data"| node_datatable
node_chartcore -->|"uses settings"| node_options
node_chartcore -->|"builds plot"| node_plotbuilder
node_chartcore -->|"calculates layout"| node_layout
node_chartcore -->|"renders chart"| node_renderer
node_renderer -->|"draws output"| node_canvas
node_browser -->|"interacts"| node_pointer
node_pointer -->|"dispatches events"| node_plugins
node_plugins -->|"extends API"| node_jsapi
node_plugins -->|"enables tooltip"| node_tooltip
node_developer -.->|"selects preset"| node_presets
node_presets -.->|"configures chart"| node_jsapi

click node_jsapi "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/chart.ts"
click node_jsvizzu "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/vizzu.ts"
click node_bridge "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/interface.cpp"
click node_native "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/cinterface.cpp"
click node_chartwidget "https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/ui/chart.cpp"
click node_chartcore "https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/main/chart.cpp"
click node_options "https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/options/options.cpp"
click node_animator "https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/animator/planner.cpp"
click node_dataapi "https://github.com/vizzuhq/vizzu-lib/blob/main/src/dataframe/interface.cpp"
click node_datatable "https://github.com/vizzuhq/vizzu-lib/blob/main/src/dataframe/impl/dataframe.cpp"
click node_aggregation "https://github.com/vizzuhq/vizzu-lib/blob/main/src/dataframe/impl/aggregators.cpp"
click node_plotbuilder "https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/generator/plotbuilder.cpp"
click node_layout "https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/main/layout.cpp"
click node_renderer "https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/rendering/drawchart.cpp"
click node_plugins "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins.ts"
click node_pointer "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins/pointerevents.ts"
click node_tooltip "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins/tooltip.ts"
click node_presets "https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins/presets.ts"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_jsapi,node_jsvizzu,node_bridge,node_native,node_browser toneBlue
class node_chartwidget,node_chartcore,node_options,node_animator toneAmber
class node_dataapi,node_datatable,node_aggregation toneMint
class node_plotbuilder,node_layout,node_renderer toneRose
class node_plugins,node_pointer,node_tooltip,node_presets,node_developer,node_canvas toneIndigo
```

## Components

### JavaScript API

- [Chart API](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/chart.ts): `src/apps/weblib/ts-api/chart.ts`
- [Vizzu entry](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/vizzu.ts): `src/apps/weblib/ts-api/vizzu.ts`
- [WASM interface](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/interface.cpp): `src/apps/weblib/interface.cpp`
- [C interface](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/cinterface.cpp): `src/apps/weblib/cinterface.cpp`

### Chart Engine

- [Chart widget](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/ui/chart.cpp): `src/chart/ui/chart.cpp`
- [Chart state](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/main/chart.cpp): `src/chart/main/chart.cpp`
- [Chart options](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/options/options.cpp): `src/chart/options/options.cpp`
- [Animation planner](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/animator/planner.cpp): `src/chart/animator/planner.cpp`

### Data Handling

- [Data interface](https://github.com/vizzuhq/vizzu-lib/blob/main/src/dataframe/interface.cpp): `src/dataframe/interface.cpp`
- [Data table](https://github.com/vizzuhq/vizzu-lib/blob/main/src/dataframe/impl/dataframe.cpp): `src/dataframe/impl/dataframe.cpp`
- [Aggregation](https://github.com/vizzuhq/vizzu-lib/blob/main/src/dataframe/impl/aggregators.cpp): `src/dataframe/impl/aggregators.cpp`

### Visualization

- [Plot generation](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/generator/plotbuilder.cpp): `src/chart/generator/plotbuilder.cpp`
- [Chart layout](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/main/layout.cpp): `src/chart/main/layout.cpp`
- [Chart drawing](https://github.com/vizzuhq/vizzu-lib/blob/main/src/chart/rendering/drawchart.cpp): `src/chart/rendering/drawchart.cpp`

### Interaction

- [API plugins](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins.ts): `src/apps/weblib/ts-api/plugins.ts`
- [Pointer events](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins/pointerevents.ts): `src/apps/weblib/ts-api/plugins/pointerevents.ts`
- [Tooltip](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins/tooltip.ts): `src/apps/weblib/ts-api/plugins/tooltip.ts`
- [Chart presets](https://github.com/vizzuhq/vizzu-lib/blob/main/src/apps/weblib/ts-api/plugins/presets.ts): `src/apps/weblib/ts-api/plugins/presets.ts`

### Other components

- **Application**
- **HTML canvas**
- **Browser user**

## Connections

- Application → Vizzu entry: creates chart
- Vizzu entry → Chart API: exposes API
- Chart API → WASM interface: calls interface
- WASM interface → C interface: forwards calls
- C interface → Chart widget: dispatches chart actions
- Chart widget → Chart state: updates state
- Chart widget → Animation planner: plans transitions
- Chart widget → Data interface: adds data
- Data interface → Data table: forwards operations
- Data table → Aggregation: uses aggregators
- Plot generation → Data table: reads data
- Chart state → Chart options: uses settings
- Chart state → Plot generation: builds plot
- Chart state → Chart layout: calculates layout
- Chart state → Chart drawing: renders chart
- Chart drawing → HTML canvas: draws output
- Browser user → Pointer events: interacts
- Pointer events → API plugins: dispatches events
- API plugins → Chart API: extends API
- API plugins → Tooltip: enables tooltip
- Application → Chart presets: selects preset
- Chart presets → Chart API: configures chart