Forum Academy Marketplace Showcase Pricing Features

[New plugin] Beautiful Customizable Charts and Graphs (ApexCharts.js)

Hi @romain.lessard

This is a complicated data formatting question. Applying calculations on a list (and creating a new list with those values) is not yet a native Bubble feature as it requires you to loop over the list and save the values to a new list (for example a custom state).

There is a plugin I have used in the past to do list calculations, but there may be others for you to use. This is pretty complex though. Hopefully this points you in the right direction! :slightly_smiling_face:


@thimo, Love the plugin!

Though, when I was trying to use geographic data in the heatmap chart, only the “data type” field presents itself. Is that intentional? I think this is causing the issue I’m seeing, where the heatmap doesn’t render on page load.


Hi @jwtuckr !

You should make sure that you use a data type that has fields to use for the X-axis and Y-axis (screenshot from demo page):

The ‘geographic address’ data type doesn’t have field for the X-axis and Y-axis that is why those field don’t show and as a result the chart is not getting displayed. You can take a look at the editor of the demo page to see how the data is structured: Chartpreview | Bubble Editor :slight_smile:

Update 6.14.0

Added support for a reverse Y-axis:


Don’t forget to refresh your editor after upgrading.

1 Like

bravo! thanks :smiley:

Ah, that makes sense! Is there a chart type you recommend to easily take in a list of geographic addresses (countries), but also counts the instances of each country?

example list:

  • USA
  • USA
  • USA
  • Germany
  • Germany
  • Germany
  • Germany
  • Germany
  • Japan
  • Japan
  • Japan
  • Japan

Thank you Thimo!
I’ll keep digging in that direction


You may want to look into a grouping to group your data by the geographical data. There are multiple charts on the demo page that use groupings, like the bar chart:

Appreciate it, Thimo. But unfortunately, Bubble doesn’t allow grouping by the Geographic Address type - :frowning:

In your example, the “Orders” data type only has the “cities” field as a “geographic address”. The country field is text


@jwtuckr Ah I wasn’t aware of that. Could a solution, like saving the name of the country as a text to the database, be helpful for your integration? You could for example extract the country name from the location and save it to a different database field when that location is saved to the database so you can use it for your charts :slightly_smiling_face:


This is actually somewhat complex. Because you will need two different data searches, this will be difficult to create a chart with this data. You will need the same amount of data points for each search, which will not work when for example you have a different amount of grades that are ‘present’ or ‘missing’.

I have replicated your data structure to try it myself. I have used a (bucket) grouping to keep the number of datapoints the same. The thing you will have to do is specify the grades inside this grouping as a minimum and maximum value (I think that the number of grades is a fixed amount so that will not matter that much). I have created a demo to showcase this:

Sidenote, in a horizontal chart the axis are reversed. I will look into if I can add X-axis pre and suffixed to the chart so you can specify the grades better :slight_smile:

Thank you so much. It works! However, my use case may not be the best match for this chart. These data points will never match exactly, I will have different amount of data for each grade for sure.

Is there a way to get something like this with ApexCharts?

@JamesGreg I have updated the demo to create the chart from your image. Does this help?

Yes, it does. Thank you so much. It works perfectly.

@Thimo can you add “forceNiceScale”? :slight_smile:
specifically to the multiple area chart!

@andyestridge Could you maybe give me an example for when this will come in handy? I played around with it, but I have a hard time seeing when this feature will be needed. If you maybe can give me an example of a use case for this feature that would be great for me to see what the best way is to implement it for you :slight_smile:

yeah for sure!

I have an instance where i am charting numbers rounded to 1, but feel like the y axis would look cleaner rounded to 0. Since i’m letting the chart format on its own, it winds up putting the gridlines and funny places imo. here’s an example:

i think forceNiceScale will make the #s all nice and rounded

anyways, it’s not a huge deal, more of a “i’m being particular” thing :laughing:

Hey @Thimo, can this plugin use CSV or JSON as a data source?


This is not (yet) natively supported by the plugin. If you can use some kind of parser plugin or upload it to your database you can ofcourse use it like you would normally use data in Bubble :slight_smile:

1 Like

Thanks for the response, @Thimo .

I realize that, but the data are actually being pulled from Bubble using a custom-built batch processor. It takes 5 - 20 minutes or more just to generate / export the data. The data relationships and queries are just too complex for real-time interaction - hence the need for a post-export mechanism for visualizing the data. Thanks though.

1 Like