How to express data as a percentage instead of a number in Donut Chat

[laura1]

Hi, I noticed that the donut and pie charts titled ‘Product Category’ and ‘Sites Visits’ respectively, the data shows up as discrete numbers instead of as percentages. How can the expression in the Bubble editor be written to show this data as percentages instead?

Furthermore, how might I express the data below as a percentage instead of a discrete number in my app which uses your donut chart?

This what the donut chart looks like now:

You’ll notice ‘Artisan’ shows up as 4. I would like it to show up as 40%, which is the percentage of the total (10) that 4 represents.

These are the expression I used in my editor:

Notice that I added a constraint for counts of 0 as I didn’t want counts with 0’s to show up.

Thank you for your help!

Laura

[mina.rotari]

Hi @laura1 ,

Thank you for reaching out, and happy holidays!

To display percentages instead of raw counts in your donut chart, here’s how you can set it up:

1. Calculate Percentages for the Chart:

Update the Series Data (list) field with:

Search for CreativeExpressionScore:each item's Count / Search for CreativeExpressionScore:sum's Count * 100  

This divides each category’s count by the total sum and multiplies it by 100 to calculate the percentage.

2. Update Slice Labels:

To include both the category name and the percentage in your labels, use:

Search for CreativeExpressionScore:each item's Creative Expression + " (" + (Search for CreativeExpressionScore:each item's Count / Search for CreativeExpressionScore:sum's Count * 100):formatted as Number + "%)"  

This will dynamically generate labels such as Artisan (40%) or Sage (10%).

These changes should help you display data more effectively, showing proportions instead of discrete counts.

If you have any further questions or need assistance with this setup, feel free to reach out anytime. We’re here to help!

Best regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[laura1]

Hi Mina,

Thank you so much for your prompt reply. Unfortunately, the expressions your wrote got cut off and I can’t see all of them so I can’t copy the expressions myself. Please see what I mean below.

Is there a way you could re-attach them so I can’t see the whole expressions? Thank you, I very much appreciate your help.

Hope you are enjoying your holidays!

Warmly,

Laura

[laura1]

Also, is there a way that I can show the description of the particular creative expression the user is hovering over within the pie chart to the left? The ‘Artisan’ Key Traits are static right now, but I would love them to change as the user changes which slice of the chart they are hovering over. Thank you!

[mina.rotari]

Hi @laura1 ,

Thank you for your message, and I hope you’re enjoying the holiday season!

I noticed that the expression I previously shared conflicts with certain plugin elements. However, based on your latest screenshot, it looks like enabling the “Show Data Labels” option now displays the percentage for each label directly on the chart. This seems like a great fit for your app design!

If you’d prefer to show percentages as a tooltip on hover instead, let me know, and I’d be happy to guide you further on setting that up.

For your second question, dynamically showing the description of the slice being hovered over is a fantastic idea! The Air Tooltip Plugin for Bubble is a free and customizable solution that can help with this. You can use it to display tooltips with dynamic content, such as the “Key Traits” for each creative expression, based on the hovered slice.

Let me know if you need help implementing this or have any other questions!

Regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[laura1]

Hi @mina.rotari,

Thank you so much for your quick, thorough response. I really appreciate your assistance. Yes, please tell me how to express the logic as a percentage as I would like to use the tooltip an would also like the total inside the donut to read 100% instead of 10.

I will check out the plugin you suggest for dynamically showing the description of the slice being hovered over. Can’t wait!

Warmly,
Laura

[mina.rotari]

Hi @laura1,

Thank you for your message and apologies for the delayed response over the weekend.

Here’s a quick guide to set up a Custom Tooltip:

1. Define a Group element on your page (this will act as your tooltip).
   

2. Assign an ID Attribute to the Group element (e.g., “tooltip”).
   

3. Copy this ID into the Custom Tooltip ID field of your chart.
   

4. Customize the Text element inside the group to display the data dynamically using the chart’s hover states.
   

   

I’ve attached a few screenshots to help guide you through the setup. Additionally, here’s a link to the test page where you can compare the configuration.

Let me know if everything works as expected!

Wishing you a fantastic New Year ahead!

Best Regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[laura1]

Oh my goodness @mina.rotari, you rock! Thank you so much for your thorough response in this forum. I also really appreciate you creating an app that I can view. You went above and beyond! Hopefully our thread will be helpful for other users as well.

I’m currently working on some other features in my app right now, but will come back to this in a week or so once I’m ready to revisit. Thanks again!

Many blessings to you in 2025.

Warmly,

Laura

[mina.rotari]

Hi @laura1 ,

Thank you so much for your kind words!

I’m thrilled to hear the response was helpful and I look forward to hearing from you when you revisit this feature.

In the meantime, if you’re enjoying our plugins, we’d love for you to leave a review. You can rate the plugin directly in the Bubble editor by searching for it in the Plugins tab, or share your experience on:

• Zeroqode Reviews
• G2
• Clutch
• Trustpilot

Your feedback is super valuable and helps us keep improving for the community.

Thanks again, and wishing you a wonderful start to 2025!

Best Regards,
Support Team
Browse all Zeroqode Plugins for Bubble

[laura1]

Hi @mina.rotari,

I just submitted a review on G2 and within Bubble.io on the plugin itself. I’ll keep you posted on my implementation. Thank you so much and keep up the good work!

Warmly,

Laura

[mina.rotari]

Hi @laura1,

Thank you so much for your kind support and for taking the time to leave those reviews—it truly means the world to us!

Wishing you all the best with your implementation, and please don’t hesitate to reach out if there’s anything we can assist with.

Best Regards,
Support Team
Browse all Zeroqode Plugins for Bubble