Services Plugins FAQs

Apex Chart | HeatMap

Help Needed
#1

Hi all,

I’m trying to create a heatmap that shows ‘activity’ of my orders.

Each of my order has a ‘Date Created’ (Bubble’s Date Created with full date + time)

What I’d like to do is plot this on a heatmap so that I can see ‘peak’ times and days.

So the heatmap would have 7 days of the week, and all hours of the day. A 24 x 7 heatmap.

Is this possible with the APEX Chart Plugin on Bubble?

Trying to figure it out for a while now but no luck.

PS - My DB doesn’t have specific columns for ‘time’ or ‘day of the week’, I don’t think it’s possible for me to add this at the stage I’m add. I’d rather use the pre-built ‘date created’ field by Bubble to plot the heatmap.

#2

Hey @hassan :wave:

Thanks for reaching out! :pray:

Great question — a 24 x 7 heatmap of order activity is definitely a powerful way to visualize peak demand times. You’re on the right track thinking of using the Apex Charts plugin, and while the plugin does support heatmaps, there are a few important things to keep in mind to make this setup work correctly.

Yes, the plugin does support heatmaps, but it expects your data to be structured in a way that clearly defines both axes — in this case, the hour of the day (0–23) and the day of the week (Sun–Sat).

Why you need specific data fields

Right now, since your database only has the Date Created field, you’ll need to extract the hour and day from that field to build a meaningful heatmap. Unfortunately, this can’t be done on-the-fly inside the chart — the heatmap data must be pre-processed into a format the chart can consume.

You can create two extra fields in your database (or generate them dynamically via searches/workflows):

  • :date: Day of Week → Extracted from Date Created (e.g., “Monday”, “Tuesday”, etc.)
  • :alarm_clock: Hour of Day → Extracted from Date Created (0 to 23)

This way, each order can be grouped into a specific time block. Then you can aggregate and feed this structured dataset into the chart.

Alternative (dynamic) approach

If you prefer not to store extra fields in your DB, you could:

  • Use Bubble’s :formatted as functions to extract the day/hour when retrieving data
  • Aggregate the data in a custom backend workflow or repeating group and then pass it to the chart in the required format (array of series objects)

You can review the plugin docs and supported chart types here:
:point_right: Apex Chart Plugin Docs

Looking forward to your reply. :sunflower:

Best,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

1 Like
#3

Hi @mina.rotari

That’s super helpful. I’ve setup the heatmap just as I wanted.

Thanks a ton for the support!

#4

Hi @hassan ,
​

I’m thrilled to hear everything is running smoothly now! :raised_hands: It’s always a pleasure to help, and we truly appreciate having you as part of our community.
​

If you’ve been enjoying our plugins, we’d love to hear your thoughts! Your feedback not only makes our day but also helps others in the Bubble community discover the best tools for their projects.
​

Leaving a quick 5-star review takes just a minute and makes a world of difference. Simply head to the Plugins tab in the Bubble editor, search for the plugin, and rate it! :star2:
​

Want to help even more? Share your experience on:
:link: Zeroqode Reviews
:link: G2
:link: Clutch
:link: Trustpilot
​

Your support means everything to us and helps us continue building awesome products for you! :rocket:
​

Thanks a ton, and have an amazing week ahead! :pray:
​

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

1 Like
#5

Hi @mina.rotari

Most certainly! Will add reviews on all places right away!

Could you please assist with one more thing. This is how my heat map looks at the moment -

image

Problems -

#1 - The time of day/Y-axis is not in order, ideally it should be from 0 to 23
#2 - Is there a way to change the default color from white to something else? Currently its white if value is 0 or low.

Thanks a ton!

The heat map is looking exactly how I dreamed it would be! Epic plugin by you and your team!

1 Like
#6

Hi @hassan ,

Thanks so much for your kind words — we’re thrilled to hear the heat map is looking just as you dreamed! :raised_hands:

Regarding your questions:

  1. When the “shade” option is checked, the color for the minimal value (which is 0) is currently assigned from a range ending at #FFFFFF (white). There isn’t a built-in way to change that default color at the moment, but you could try applying custom CSS via a Bubble HTML element to override the white background if needed.

    image
    image2284×782 71.2 KB

  2. For the Y-axis ordering (time of day), the plugin doesn’t have a built-in sorting feature. The heat map reads your database fields in the order they’re stored. As a workaround, you might want to add the time values manually from 0 to 23 in your data source to ensure the correct order. I’ve attached a screenshot for reference.

    image
    image1728×1110 62.2 KB

Hope this helps! If you have any other questions, feel free to ask.

Best regards, Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

#7

Hey @mina.rotari

Thank you for your response.

I’m not sure I follow what you mean by this -

For the Y-axis ordering (time of day), the plugin doesn’t have a built-in sorting feature. The heat map reads your database fields in the order they’re stored. As a workaround, you might want to add the time values manually from 0 to 23 in your data source to ensure the correct order. I’ve attached a screenshot for reference.

The data source is my Orders DB, and in this DB I have a ‘Hour of Day’ field as per your previous suggestion.

Orders are placed throughout the day, so adding a ‘manual’ order … I’m not sure I understand.

Sorting the time of day is crucial - otherwise having processed all these orders to have ‘Hour’ and ‘Day’ would be a waste as you can imagine.

#8

Hi @hassan ,

Thank you for your follow-up and for clarifying your setup. :pray:

What I meant is that the plugin itself doesn’t automatically sort the Y-axis values—it displays them in the order they come from your data source. Since your ‘Hour of Day’ field comes from actual orders placed throughout the day (which may not be sequential), the heat map may show them in a non-chronological order.

To ensure the Y-axis shows hours from 0 to 23 in the correct order, you would need to structure your data so that the heat map receives the hours sorted properly—this could mean creating a separate reference list of hours from 0 to 23 or sorting your data before feeding it to the plugin.

image
image1342×916 57.4 KB

We’ll also pass this idea along to our development team for consideration in a future update to improve sorting capabilities.

Looking forward to your reply. :sunflower:

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3

#9

Hey @mina.rotari

Yeah I don’t think this is an ideal way of doing things.

Hopefully you guys will push an update so I can use the plugin for heatmaps. For now I’ve gone with another plugin but will wait desperately until you guys can fix this.

As a feedback: I would request to try and use real life examples of data when updating the plug-in. In your demo and examples you guys have used data that is not realistic. Try and make a realistic DB and then update the plugin to accommodate and render that data. That’d be epic!

Thanks a ton again for all the support!

1 Like
#10

Hi @hassan

Thank you for your honest feedback—we really appreciate it.

You’re absolutely right that realistic data examples can go a long way in showcasing how a plugin performs in real-world use cases, and we’ll definitely take that into account as we plan future improvements and updates.

I’ve noted your suggestion and passed it along to our development team, including the request for enhanced Y-axis sorting for heatmaps. While we can’t commit to a timeline just yet, your input helps us prioritize the right features based on actual user needs.

Thanks again for giving the plugin a try, and for your thoughtful suggestions.

Best regards,
Support Team
Browse all Zeroqode Plugins for bubble
Banner_Last3