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

screenshot 1 is the webpage with the chart loaded. it includes the button to create the PNG and a text box populated with the PNG url
screenshot 2 is the loaded png url - its blank??? why?
screenshot 3 is the workflow for the button shown in screenshot 1 that generates the png url

It also looks like a correct setup to me. I will send you a PM so we can take a better look at this issue :slight_smile:

Update 6.67.0

You can now specify a different color for the negative values for a waterfall chart! Check out the demo page to see it in action:

1 Like

Hey @Thimo I’m wondering if you have any plans to add logarithmic scale for scatter/bubble chart axes?

thanks a ton!

Hi @aestela I will add this feature to my feature list to explore of I can include it in a future update :slight_smile:

1 Like

Update 6.70.0

Added the ability to specify a list of colors for the Polar Area, Pie and Donut chart:

Awesome work as always! Will it be possible to click on a bar and a popup would appear referencing the record linked to the bar? Thanks :slight_smile:

I’ve got a use case I’m trying to validate to see if this plugin can work for me. I’m creating sql queries using openAI. That query executes and you end up with a table. I want the user to click a button that then generates a graph based on the table that was just generated (I could have it come from an api source; I can’t think of a better way as I don’t think using bubble.io database would work for this). Another way to ask this is can I let a user modify a graphs source, and that source not be from a bubble.io database?

I think I’m doing something pretty similar to what you are describing:

This table (also from @Thimo !) gets it data from sql query:
https://app.tracktradecrypto.com/all-collections

Clicking on a row opens a new page, which has an apex chart populated also by a sql query:
https://app.tracktradecrypto.com/collection/sewerpass

Changing the source would be as easy as defining the appropriate SQL connections in bubble and letting the user pick

1 Like

Yes this is possible. This is a demo for the area chart, but it works the same for a bar chart: Chartpreview | Bubble Editor

The chart source can be what ever you want (Bubble db, a custom state, API call etc) as long as you can provide a list of numbers (Y-axis) and a list of texts (X-axis) that are the same length :slight_smile:

@drfalken Shared a very cool demo you could take a look at (:

1 Like

Thanks :slight_smile:

@Thimo Hey man, I am getting this error: Uncaught TypeError: Cannot read properties of undefined (reading ‘node’). Charts don’t work

Hi @feb0! Thank you for reporting. I will send you a PM so we can take a closer look at the issue you are having! :slight_smile:

Loving this plugin so far, thank you :pray:

I do have one issue that I can’t seem to find an answer to. Is there a way to edit the scale of y axis in multi area chart? example if i have a range of numbers, let’s say 150 - 200, for y-axis values, the auto scale of y-axis looks good. However, if the range is small, lets say between 120 and 121.5, the scale is misleading as the chart zooms in on the y axis and the difference between 120 and 121.5 looks to be enormous. Any advice on how to alter the scale of y-axis? Thank you

apexcharts 1

apexcharts 2

You can set a custom min and max value for the y-axis using these fields:

That way you can control how the y-axis is displayed :slight_smile:

1 Like

thanks! I don’t know how I missed that :man_facepalming:

another question for you: how can I convert a list of dates to list of texts to be used as series category for x axis in multiple area chart? and is there a way to include more information in the tooltip floating group or just data from a single field for the each item in the series?

Please take a look at the demo: Chartpreview | Bubble Editor

If you are using the default tooltip no, but you can use a custom tooltip to display more information (this is an advanced feature, there is an example on the demo page) :slight_smile:

Hi @Thimo I’m getting a bug with the 2nd y-axis data label prefix, It’s carrying over the data label from the left y-axis.

Also, I’m trying to add more than 1 series to the 2nd y-axis, but can’t find how to do this since the 2nd y-axis series field only receives a text. Hopefully you can help me out with this.

Best Regards.

I pushed update 6.77.0 that should fix this issue!

Right now only 1 series is supported for the 2nd y-axis. Instead of adding another series to the 2nd Y-axis, can you not add those series to the 1st y-axis and add the series that is on the 1st y-axis to the 2nd y-axis? (so you end up with 1 series on the 2nd y-axis) :slight_smile: