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.