Making a Heat map


Im hoping someone can help out with this Im trying to add a heat map into my website that looks at the numbers in text objects on a popup. I have it set to have the text objects show the different numbers like in the screenshot but i can’t figure out how to format the background of the text objects to be like the head map of the screenshot attached. Does anyone have any suggestions?

Hey @dfinch2132, welcome to Bubble!

A few ways to go about this:

  1. You could use dynamic colors to each day by adding a text field named ‘hex’ in your database table. Then simply use conditionals to set the desired appropriate color, like this:


The Dynamic Bakground Color will be the Database Table Hex color. (Note: In the database table, the ‘hex’ color code must have the # in front of the numbers)

  1. Maybe another option you may be looking for is a new plugin released by @Jici

Hope this helps.


Awesome thank you

1 Like

Anytime! :slight_smile:

So after looking into the plug in is what im trying to do but since im using the free plan i can’t get it. Is there any way to compare 7 numbers at once?

@Jici or someone else on the forum may be able to comment on this, as I’m not too sure/familiar with that aspect… :slightly_smiling_face:

I think that your idea is good.
@dfinch2132 If you follow this idea, you should be able to do that (if you only have one row like in your example). You may need to use Advanced filter to be able to filter on the day name and : count
Normally, your case is more a bar chart than a heatmap one. But I don’t there’s more option on free plan for that.

Thank you. The screenshot that was provided is in an excel sheet that i had created already with conditional formatting. What im working with is 7 text objects that i set a custom state to filter based on the input with the day listed. I took a screenshot of what i have on my bubble page. I’m trying to set this up so that multiple users get different results and that you are able to filter by a specified date and month. I have the data to do what i want i just can’t get it to display the heatmap or even the bar graph to show the numbers.

This topic was automatically closed after 70 days. New replies are no longer allowed.