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.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.