How to create a Pie Chart in Bubble.io
In this Bubble.io tutorial we demonstrate how to create a Pie Chart in Bubble using ApexCharts by Thimo.
Unlock the power of pie charts: Learn how to visualize product sales data in Bubble.io!
Master data visualization: Create stunning charts in Bubble with our step-by-step guide.
Elevate your Bubble skills: Discover how to use Apex Charts by Thimmo for impressive data representation.
Creating Beautiful Data Visualization in Bubble.io
Welcome to another video looking at the topic of beautiful data visualization in Bubble.io. Basically what I mean is how to create really good-looking charts in Bubble. And to begin with, in an earlier tutorial I've demonstrated how to create this area chart or line chart with my data down here. I've called these purchases and then it visualizes purchases grouped by each month.
Adding Products to the Database
But what have I wanted to visualize on a pie chart? How different products represent the sum total? So in my app data I've added in products, data type, jeans, t-shirt, trainers. I've also given to purchase a product field. So I'm going to add in a dropdown to my repeating group here. And this is going to be my way of quickly assigning a product to my purchases.
Setting Up Auto-binding
So products have got field called label. I'm going to say this is auto-binding modifying product. Because it's the first time I've set up auto-binding I just need to add in a privacy rule. And I'm just going to say for the purpose of demonstration in this app everything can be allow auto-binding on everything. So now if I refresh I can assign different clothing items to each of my orders.
Introducing Apex Charts Plugin
Now let's get into showing a pie chart. And so I'm showcasing here a plugin called Apex Charts by Thimmo. Really class act of a plugin developer. Some real quality plugins out there. And this is the chart plugin that I keep coming back to. And so I'm going to be creating a pie chart just like this one.
Adding a Pie Chart to the Page
If I scroll up to the top I can go page editor. And this is his pie chart that he's got as part of his demo. So let's get the pie chart element. I can access this because I'm already subscribed to his plugin. I've added it in through the plugin store. So let's add in a pie chart.
Configuring the Pie Chart Data
And so the series data is going to be do a search for purchases. And I'm going to group by the product. And I'm going to add a new aggregation. And that's going to be count. And so in fact I'm going to demo two different ways of doing it. First of all I just want to know the number of orders of a particular product. How that looks in the whole using a pie chart.
Setting Up the Chart Labels
So I'm going to use count. And then the data is going to be each item's count. And then I'm going to copy and paste this into here. And instead of count I need to provide a label. And so that's each product's label. And let's preview that.
Visualizing Order Counts
Okay so t-shirts make up three orders. Three out of six. So that's half. So there we have t-shirts showing up half. And then trainers two and jeans one.
Changing to Sum of Order Amounts
What if I wanted to see a pie chart based on the amount, which is this number here, for each order? Or rather grouped by the product. So I'm going to change my group by. And I can just add in another aggregation. And this time it's going to be sum and it's going to be amount. And I'm going to change this to group by product. And this time sum of amount.
Enhancing Chart Appearance
So trainers looks like it should be the largest one. There we go trainers. So that's the sum of all the trainer values. And the same for jeans and t-shirts. Let's do a few things just to make this chart look a little bit more attractive. So I can add in some prefixes. Let's get the right ones in here. Data label prefix.
Adding Currency Symbols and Formatting
So I think if I put a dollar sign in there. Let's check that. Yeah I'm now getting a dollars sign on the tooltip when I hover over. I think I can also adjust decimal places. Does that need decimal? decimal.mat. So I can change this to zero.
Final Result
Okay there we go. So that's it. That's how to create a pie chart in Bubble.
The best way to learn Bubble.io?
Start building with total confidence
No more delays. With 30+ hours of expert content, you’ll have the insights needed to build effectively.
Find every solution in one place
No more searching across platforms for tutorials. Our bundle has everything you need, with 500+ videos covering every feature and technique.
Dive deep into every detail
Get beyond the basics with comprehensive, in-depth courses & no code tutorials that empower you to create a feature-rich, professional app.
![](https://cdn.prod.website-files.com/665906e27d14bdd3c329e392/66c49b98fad51f4cba2f57b9_Planet%20No%20Code%20Logo%2023.png)
Frequently Asked Questions
Find answers to common questions about our courses, tutorials & content.
No. Our Beginner Essentials course and AI No-Code Coach are designed for total newcomers. You’ll learn Bubble.io step by step - no coding required.
Simply type your question in plain English, and our AI taps into the entire video library to recommend the exact lessons you need. It’s like having a personal instructor on demand.
As long as you’re subscribed! With our monthly subscription, you get unlimited access to all 500+ videos, our growing course library, and the AI No-Code Coach.
Your subscription includes:
- Bubble Beginner Essentials – Get up and running fast.
- Build a ChatGPT Clone – Integrate AI into your no-code apps.
- Build Your SaaS Website with AI – Learn to create a scalable startup site.
Plus, new tutorials every week!
The AI No-Code Coach is your first stop for instant answers. If you need deeper help, you can book 1:1 Bubble coaching for expert guidance.
Yes! If you don’t see real progress within 14 days, let us know, and we’ll issue a full refund—no questions asked.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
Absolutely. Your subscription is month-to-month, and you can cancel anytime—no lock-ins, no hidden fees.
If you’re serious about building a successful SaaS startup, check out Mastery—our intensive mentorship program. Mastery goes beyond Bubble.io development and includes:
- 1:1 mentorship to fast-track your progress
- Marketing strategies tailored for no-code founders
- Product management insights to scale your startup
- Personalized support from experienced founders