MARKETPLACE
PLUGINS
VIZBLOCKS (PRO)
VizBlocks (Pro) logo

VizBlocks (Pro)

Published March 2026
   •    Updated this month

Plugin details

Stop settling for basic, outdated charts. VizBlocks PRO is the ultimate data visualization suite for Bubble, designed for founders, agencies, and builders who want their apps to look like premium SaaS products.
Under the hood, VizBlocks combines the power of industry-leading libraries (ApexCharts, D3.js, Vis.js, and Venn.js) but abstracts all the complex code away into simple, easy-to-use Bubble elements.

🚀 The PRO Advantage:
While the VizBlocks Free version covers your standard needs (Line, Bar, Pie), the PRO version unlocks advanced, interactive visualizations used by top-tier analytics platforms:

Advanced Analytics: Scatter Plots with auto-calculated Trendlines, Histograms with Normal Distribution curves, Multi-Series (Dual Y-Axis) charts.

Process & Hierarchy: Interactive Flow Charts (Drag & Drop), Radial Mind Maps, Funnel & Pyramid Charts.

Unique Visuals: Custom-shaped Word Clouds, beautiful Timelines, Venn Diagrams, Stacked Area Charts with gradients, and animated Process Lists.

🌱 This is just the beginning (V1)!
We are actively developing VizBlocks. Future updates will introduce deep Bubble Workflow integrations (Click interactions, States) and even more chart types. Get in early and help shape the future of data viz in Bubble!

The "Drill-Down" Revolution: Almost every chart now supports Click Events! Trigger Bubble workflows and extract exact values, categories, or node IDs when users click on a slice, bar, or point.

Smart Number Formatting: Add prefixes (e.g., "$") and suffixes (e.g., "k") dynamically to axes, tooltips, and data labels.

Advanced Mind Maps: Built-in Zoom & Pan engine! Drag the canvas and use your mouse wheel to navigate massive tree diagrams.

Hierarchical Flow Charts: Instantly convert messy organic networks into clean Top-Down or Left-Right organizational charts.

Automated Statistics: Scatter Plots now calculate Linear Regression (Trendlines) on the fly, and Histograms auto-generate Bins (Sturges' formula) with Gaussian Normal Distribution curves!

Bulletproof UI: Custom tooltips that never get cut off by screen edges, protected crosshairs, and zero-crash Datetime handling.

🖱️ Universal Interactivity & Workflows
Every single chart now features dedicated click events and standardized exposed states (like clicked_index, clicked_value, clicked_category). You can now use a Treemap or a Timeline as a navigation menu, or trigger specific popups when a user clicks a specific node in a Mind Map.

🎨 Pixel-Perfect Design Controls
We handed the design keys over to you. Control the exact padding in Bubble Clouds, adjust the gap between Progress List items, choose connecting line styles (dashed, dotted) for Timelines, and select custom geometric shapes for Flow Chart nodes.

💬 Smart Formatting & Data Labels
Say goodbye to raw numbers. V3 introduces universal Prefix and Suffix formatting across charts and tooltips. Plus, new "Smart Zero" logic hides empty data cleanly, and new Data Label toggles let you print values directly onto bars, points, and Venn diagram intersections.

Chart-Specific Upgrades:

Pictograph: Now interactive! Use it as a custom rating input system.

Bubble Chart: Max bubble size control and embedded data labels.

Stacked Bar: Smart zero handling and custom tooltip formatting.

Bubble Cloud: Adjustable padding and dynamic text sizing.

Treemap: Toggleable drill-down zoom and adjustable box padding.

Word Cloud: Grid density control and dynamic font family selection.

Area Chart: Toggleable data point markers and value labels.

Timeline: Compact mode (hide descriptions) and custom connecting line styles.

Progress List: Custom completed icons (Checkmark, Dot, Number) and item spacing.

Flow Chart: Custom node shapes (diamond, ellipse, database) and straight/curved edge routing.

Venn Diagram: Embedded inner values, adjustable fill opacity, and intersection click detection.

Mind Map: "Start Collapsed" mode and adjustable branch radius spacing.

Mixed Chart: Independent data labels, customizable line curves, and marker toggles.


VizBlocks V4 - The Pro Business & Finance Update 📊💼

Take your Bubble dashboards to the absolute next level! Version 4 introduces 5 highly requested, advanced, and fully responsive charts tailored for Project Management, Financial Reporting, Analytics, and Trading platforms.

All new charts come equipped with interactive features: users can click on data points (bars, nodes, cells, or candles) to trigger Bubble workflows and instantly extract data using Exposed States. Zero coding required!

✨ What's New in V4:

🗓️ Gantt Chart: Perfect for project management apps. Visualize timelines, group tasks by teams, and color-code by status.

🌊 Waterfall Chart: The ultimate financial tool to show cumulative effects of positive and negative values (Revenue - Costs + Bonuses = Net Profit).

🕸️ Radar (Spider) Chart: Easily compare multiple attributes or performance metrics in a beautiful web layout.

🌡️ Heatmap: Show data density and matrixes. Great for weekly activity tracking, traffic times, or contribution graphs.

📈 Candlestick Chart: Build real trading, crypto, or stock market dashboards using Open-High-Low-Close (OHLC) data.

Demo Page: https://demo-app-56978.bubbleapps.io/version-test/vizblocks_pro/1773224762503x836269096130165100


Editor: https://bubble.io/page?id=demo-app-56978&test_plugin=1772896587529x721800980535443500_current&tab=Design&name=vizblocks_pro

$15

One time  •  Or  $5/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

NoCoddo logo
NoCoddo
Joined 2025   •   83 Plugins
View contributor profile

Instructions

How to use VizBlocks:
Drop any VizBlocks element onto your Bubble page.

Provide the data using Bubble's standard dynamic data (Do a search for...:each item's [Field]).

Note: All data fields expect a List (e.g., List of Texts, List of Numbers).

Quick Testing Tip: To test a chart quickly without a database, type a string of items separated by commas and use the :split by (, ) operator (e.g., Jan, Feb, Mar:split by (, )).

Customize the look! Add your brand's hex codes to the Colors list field, adjust opacities, toggles, and gradients to fit your app's UI perfectly.

⚡ How to use Interactivity (Drill-downs):

Every interactive chart exposes Custom States (e.g., clicked_value, clicked_category).

Go to the Workflow tab and add a new event: Elements -> A VizBlocks [Chart] is clicked.

Use the exposed states to filter repeating groups, open detail popups, or navigate your users. (Tip: Use the "clicked_item_index" on the Progress List to switch between Groups!)

💰 Smart Formatting:
Use the Value Prefix and Value Suffix fields to automatically format large numbers. Example: Prefix $ and Suffix k will turn 15 into $15k across axes and tooltips.

🧠 Pro Tips:

Area Chart: When using Is Datetime mode, format your Bubble dates as ISO or standard timestamps to ensure perfect rendering.

Mind Map & Flow Chart: You can leave the "Parent ID" empty for your main central node. The plugin will automatically calculate the hierarchy!


How to upgrade and use VizBlocks V3 safely:

Update the Plugin: Go to the Plugins tab in your Bubble editor, select VizBlocks, and upgrade to Version 3.0.0. Refresh your editor.

Review New Properties: Click on your existing VizBlocks elements on the canvas. You will notice new configuration fields grouped logically (e.g., 💬 Labels & Formatting, ⚙️ Chart Settings). By default, new visual features (like Data Labels or Trendlines) are toggled off to preserve your existing V2 designs.

Unlock Interactivity: Go to the Workflow tab. You can now use triggers like When VizBlocks Treemap is clicked. Use the new element states (e.g., VizBlocks Treemap's clicked_index) to pass data to popups, custom states, or database actions.

Format Your Data: Take advantage of the new Value Prefix and Value Suffix fields to add currencies ($) or metrics (kg) directly into the charts and floating tooltips.


How to use the new V4 Charts:

Drag & Drop: Place the new VizBlocks elements (Gantt, Waterfall, Radar, Heatmap, or Candlestick) onto your Bubble page. They are fully responsive and will adapt perfectly to your container's width and height.

Feed the Data: Each chart uses standard Bubble "List" fields (e.g., List of Texts, List of Numbers, List of Dates). Use dynamic data from your database or APIs to populate these lists.

Heatmap Tip: Feed it a single flat list of numbers. The plugin will automatically split it into the X/Y matrix!

Waterfall Tip: Use the Is Total Column (Yes/No) list to define which bars should drop down to zero (e.g., your Net Profit).

Customize: Adjust the custom color properties to match your app's branding.

Add Workflows: Go to your Workflows tab, select "Elements", and choose the specific trigger for your chart (e.g., "A cell is clicked").

Use Exposed States: Inside your workflow, use the element's states (e.g., VizBlocks Heatmap A's clicked_value) to show popups, alerts, or populate edit groups.

Types

This plugin can be found under the following types:
Background Services   •   Element   •   Event

Categories

This plugin can be found under the following categories:
Productivity   •   Technical   •   Analytics   •   Chart   •   Ecommerce   •   Visual Elements

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales