Forum Academy Marketplace Showcase Pricing Features

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

I have send you a PM with some additional details!

Is there any way to have more than 5 possible colors for donut charts? My app can have up to 10 segments/data points and it’s just repeating the 5. Ideally I’d like to give it a dynamically created list of colors, as many as I want? If I have more colors setup than there are data points it would just ignore the later colors.

Hi @dev57 right now, you can’t supply a list of colors for the donut chart. I have placed the feature on my list to include in a future update. For now, you can use the monochrome feature to use different shades of a color for every data point:

Hi Thimo,
Would it be possible to add the ‘forecast options’ to the bar chart as well? The bars would have a fill opacity and a dash array similarly to the line array.

1 Like

@nico.dicagno Thanks for the feature request! I will put this on my list to see if I can include it a future update! :slight_smile:

1 Like

Update 6.59.0 & 6.59.1

Added 2 new charts!

  • The 1 dimensional funnel chart
  • The 2 dimensional funnel chart

Don’t forget to refresh your editor after upgrading


Wow thats awesome, and the color control is unreal!
Thank you very much Thimo, will definately use these funnels.

Built a funnel from scratch using CSS a few days ago. Glad i wont have to do that again.

1 Like

Fantastic plugin. I’m having an issue that I’m hoping you can help me with. I am trying to use your AreaChart-multiplelines. I have a DataType called Claims. In it is a field called Location which is of type Location which is a DataType consisting of a Name (it’s text). How can I search against Claims with a constraint of Location equaling a given name (e.g. Home)? Whenever I add this constraint (Location=Arbitrary Text(Home), it stays red and does nothing. I’m at a loss as to how to make this work. Any help that you can provide is appreciated. Thanks.

@Thimo I’ve been trying to connect this BarChart to my database that is full of “geographic addresses” but it won’t connect because it’s not “text”. I have about 100 addresses with states and cities, but they’re type is “geo address” and not “text”. How do I connect these? I want it to look like the photo i attached, i want the chart to reflect the map up top.

Much appreciate it!

Hi @jwtuckr I have this exact question, did you find a solution? I have a list of 100 addresses that are the type “geographic address” and not “text”. And i want to display them.

Did you figure it out? I’m stuck :frowning:

This is more a Bubble related question, but normally you only filter a location using another location (not a text). You can do an advanced filter but it can make your app quite slow. Here is an example of that expression: Chartpreview | Bubble Editor

No sure if I understand correctly, but can’t you just use the :extract operator for this? I also think you need to use a grouping by address for the chart you want to create as you need the count of the number of the same addresses right? You can’t group by address in Bubble yet, but you can just save the city name using the same :extract operator to your data base when you are saving the location and just use that instead of a location.

Thanks @Thimo for pointing me in the right direction. I was able to get this figured out. Thanks again.

1 Like

It seems like the new engine no longer angles the x-axis labels. Is there a way to still do this?

@sydney22 Right now labels that don’t fit the chart will be automatically hidden as otherwise they will overlap. I am working on a update that adds a new chart and I will also try to add the option to overwrite the rotation of the labels so they won’t be hidden but rotated! :slight_smile:

1 Like

Thanks, @Thimo! I loved the aesthetic of the angled look and would be thrilled to have that back!

Hi, I have 3 simple bar charts on a page
the third (last) one on the page is sometimes loading sometimes not, when I use the debug tool the data is there but the chart shows as if it is empty (value is 0)

@abdoullahhedev I will send you a PM to take a beter look at the situation!

Hi Thimo,

I’m having an issue with how the charts display across browsers and operating systems.

On Safari, in MacOS, the data displays fine, but none of the data shows on Chrome in Windows.

Can you help me?


I will send you a PM so we can take a closer look at the issue you are having! :slight_smile:

Hi Thimo,

Fantastic plugin.

I have an issue though. I am unable to refresh the chart data series when the parent group data source is reset.

I have setup a loader that disappears when the chart is loaded (the condition is when the data series 1: count > 0 the loader is not visible):


Great. It works fine when I refresh the page. The loader appears and then disappears once the values are rendered in the chart element.

The AreaChart is picking up the values from its parent group:


The data source is pushed through a workflow using the action “Display data in Group Chart”.

Every time the API is triggered the data refreshes in the chart fine. I used the “Display data in Group Chart” and then the action “Re-render AreaChart Chart”. It works. However, I would like the loader to appear again and the chart values to reset before the new data is displayed. So, to achieve that I have added 2 more steps: “Reset Group Chart” and “Re-render AreaChart Chart”. The workflow looks like this:

But, it does not work. The Group Chart data source seems like it is not resetting to its original “empty” values. Thus, the loader does not reappear and the AreaChart is not resetting its value before showing the new values. So, the AreaChart updates directly to the new values without having that middles step (loading data UX).

The only way I could make it work was to add an extra “Display data in Group Chart” step in the workflow with “Data to display” empty. However, I cannot leave it empty because Bubble will raise an issue in the issue checker.

What puzzles me is that the “Reset Group Chart” action should bring the parent group data source to the initial state (empty), so the following step “Display data in Group Chart” should be unnecessary.

So, the pair actions “Display data in Group Chart” + “Re-render AreaChart Chart” works, while the pair actions “Reset Group Chart” + “Re-render AreaChart Chart” does not work.

Any idea why?