Welcome to VizBlocks! Let's build your Dashboard. 🚀
VizBlocks is designed to be completely Plug & Play. Here is how to get your beautiful charts up and running in minutes:

Step 1: Place the Element
Drag and drop your desired VizBlocks element (Bar, Line, Pie, Donut, or Big Number) from the visual elements menu onto your page.

Step 2: Give it Space (Responsive Design) 📐
Our charts are 100% responsive, meaning they will expand to fill the box you put them in. Ensure the VizBlocks element is placed inside a container (like a Group) with a defined minimum height (e.g., 300px) so the chart has room to render and look great!

Step 3: Feed the Data (For Charts) 📊
Bar, Line, Pie, and Donut charts require Lists of data to work.

In the Categories/Labels field, provide a list of texts (e.g., Do a search for Invoices :each item's Creation Date (formatted)).

In the Series Data field, provide a list of numbers (e.g., Do a search for Invoices :each item's Total Amount).

Crucial Rule: Ensure your Labels list and your Data list have the exact same number of items so the chart aligns correctly!

Step 4: Feed the Data (For the Big Number) 🔢
The Single Big Number (KPI Card) is a standalone element. It does not require lists. Simply provide a single numerical value for the Main Value and (optionally) a Previous Value. The element will automatically calculate the percentage change and display a green/red arrow!

Step 5: Customize the Look 🎨
Leave the Colors field empty to use our gorgeous default modern palette. Want to use your brand colors? Simply pass a list of HEX codes (e.g., #1E90FF, #00E396) and VizBlocks will apply them to your series and slices automatically.

💡 Pro Tip: You can use Bubble's Conditionals tab on the VizBlocks elements to dynamically change properties! For example, change the Pie Chart Theme from 'light' to 'dark' when the user toggles dark mode in your app.

Happy building! ✨