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

Hi Thimo, I was wondering if bar color can be set up conditionally.

For example, on bars with less than 100 be red, and bars above 100 be green.

Thanks in advance!

Hello. Thank you for the wonderful plugin.
I have two questions regarding the Scatter Chart.

  1. Is it possible to increase the number of X-axis labels?
    Only “2.00” indicated by the arrow on the right side of the image is displayed, but I want to display multiple labels at equal intervals like the second image.

  2. This may be a bug. The value of the X-axis indicated by the arrow on the left of the first image is “3.1”, and the value of the label of the X-axis indicated by the arrow on the right is “2.00”. In general, I think a scatter plot with 3.1 on the right side is correct, but why does this happen?
    The label setting is like the third image.

thank you.

Update 6.51.0

The charts are now fully compatible with the new responsive engine! (if you are already using the new responsive engine, you may need to re-adjust the responsive settings again for your charts)

Don’t forget to refresh your editor after upgrading

1 Like

Hey @Thimo great plugin! Any advice on how to make a user configurable dashboard, where they can customize the layout of the charts? Like, be able to arrange simple layouts of multiple charts, saved to the user-specific entry in the db. Im new to bubble, so not sure how to make dynamic elements I suppose?

@drfalken Not sure if I completely understand your question, but you can add conditionals to the charts in the conditional tab :slight_smile: For example:

Does that point you in the right direction?

Since the last update, I’ve noticed that my graphs will load normally once the page is loaded, but if I click on a different tab and then go back to the original tab (my app is an SPA with tabbed groups) then the graphs are blank.

I’m in the process of updating my app to the new engine so at present I’m still on the old editor if that could have something to do with it. When I downgraded to the previous version (6.50.2), the problem was resolved.

@sydney22 the new update does upgrade the charts to the new responsive engine. This may cause some unexpected behavior in the old engine. I did try to wait till most of the bugs were resolved by the Bubble team, but there could may be still some unexpected behavior present. Let’s see if upgrading your pages to the new responsive engine fixed the issue! Otherwise I will submit a bug report :slight_smile:

Yes it appears that the old engine is causing the issue- resolved on upgrade.

Hey there - thanks for the reply…no I meant having the user be able to change the chart type completely, from say pie chart to bar chart.

@drfalken As the each chart has its own separate element you can’t change the chart type conditionally. What you can do it having multiple chart types on the page and hide/show them when needed! :slight_smile:

1 Like

Makes sense, thanks! Would all those be loaded on the page even if hidden? Or would it be loaded dynamically when the user chooses the appropriate type?

@drfalken Bubble does not load the data sources for charts (other elements) when they are hidden. So multiple charts like this should not cause performance issues :slight_smile:

1 Like

@Thimo thanks! Another question, i am fetching data from two sql queries (one has rows 0-199, the other 200-400, to get around the 200 item limit). It seems like it would be possible to combine these two as one list, but I just get an error when I do so:

Also, i have read bubble removes duplicates when merging, which is definitely not what I want. Ultimately I am just looking to plot 400 points in a time series…

@drfalken this is a Bubble expression error and you can see more details about this error in the issue checker. I think you have the operator ‘contains list’ at the end which seems to be the cause as it should not be there. To experiment with list operations like this I recommend to place your expressions in a text element so you can see exactly what the output is. Hopefully this helps! :slight_smile:

1 Like

Alright thanks @Thimo - is it possible to combine the two query results directly in the series data input? Or does it need to be combined elsewhere?

Yes you can combine your data searches. You can for example use the ‘merged with’ operator. You need to keep in mind that the number of data points should be the same for your Y-axis data as for the X-axis data. (e.g. if you have a list with 10 numbers on the Y-axis, you need a list of 10 texts on the X-axis) :slight_smile:

1 Like

Ok I’ll give it a shot. I understood “merged with” would remove duplicates though? I definitely may have duplicate values in my data that I would need to keep.

@drfalken Yes, merging lists will remove duplicates (if I recall correctly)

1 Like

Thanks - I wrote a 1 liner in JS to concat instead haha. Is there a limit to how many datapoints I can chart?

No there should not be a limit, but keep in mind that if you load many many datapoint, you can see a hit on your Bubble app performance :slight_smile:

1 Like