Metabase Custom Visualizations

Custom visualization packages for Metabase.

Each visualization lives in its own directory and builds its own uploadable .tgz package.

Visualizations

Treemap

Displays part-to-whole data as nested rectangles. Use it for rows with a label, a positive numeric value, and an optional group.

Item	Value
Source	treemap/
README	treemap/README.md
Package	treemap/metabase-treemap-0.0.1.tgz
Example data	Large-cap stock market companies grouped by sector
Screenshot	Uses Billions value units and the Balanced size scale
Color scheme	Follows Metabase Light/Dark mode

Use A Visualization

1. Open the visualization directory.
2. Read its README.
3. Upload the .tgz package listed for that visualization in Metabase Admin settings under Custom visualizations.
4. Create or open a Metabase question with the required data shape.
5. Select the custom visualization and configure its fields.

Rebuild A Package

Run commands from the visualization directory:

npm install
npm run type-check
npm run build

After rebuilding, confirm the package contents:

tar -tzf metabase-treemap-0.0.1.tgz

Expected package shape:

metabase-plugin.json
dist/index.js
dist/assets/...